DEV Community

Cover image for An Introduction to Frontend Technologies: HTML, CSS and React JS
Olamide Femi-Babatunde
Olamide Femi-Babatunde

Posted on

An Introduction to Frontend Technologies: HTML, CSS and React JS

Intro

Frontend development is the practice of creating the user interface (UI) of a website / application. Three core technologies are fundamental to frontend development: HTML, CSS, and JavaScript. This article will introduce you to these technologies, focusing on React JS as a popular JavaScript library.

HTML: The Structure

Image description
HTML (HyperText Markup Language) is the backbone of any web page. It structures the content, defining elements like headings, paragraphs, links, images, and more.

<!DOCTYPE html>
<html>
<head>
    <title>My First HTML Page</title>
</head>
<body>
    <h1>Welcome to Frontend Development</h1>
    <p>This is a paragraph.</p>
    <a href="https://www.example.com">Visit Example</a>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS: The Style

Image description
CSS (Cascading Style Sheets) is used to style HTML elements. It controls the layout, colors, fonts, and overall visual presentation.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

h1 {
    color: #0066cc;
}

p {
    font-size: 16px;
}
Enter fullscreen mode Exit fullscreen mode

React JS: The Interaction

Image description
React JS is a JavaScript library for building user interfaces, particularly single-page applications where data changes over time without needing to reload the page. It allows developers to create reusable UI components.

First, ensure you have Node.js and npm installed. Then, create a new React project using Create React App:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

Now, let's create a simple React component.

import React from 'react';

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <h1>Welcome to React</h1>
                <p>This is a simple React component.</p>
            </header>
        </div>
    );
}

export default App;
Enter fullscreen mode Exit fullscreen mode
.App {
    text-align: center;
    margin-top: 50px;
}

.App-header {
    background-color: #282c34;
    padding: 20px;
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

Explanation

  1. HTML: Defines the structure of your content. In React, JSX (JavaScript XML) is used to write HTML-like syntax within JavaScript files.

  2. CSS: Styles the content, making it visually appealing. In React, you can import CSS files directly into your components.

  3. React JS: Manages the state and behavior of your application, allowing you to create dynamic and interactive user interfaces.

Conclusion

Understanding HTML, CSS, and React JS is crucial for modern frontend development. HTML provides the structure, CSS adds style, and React JS introduces interactivity and dynamic data handling. By mastering these technologies, you can create responsive and engaging web applications.

Top comments (0)