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
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>
CSS: The Style
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;
}
React JS: The Interaction
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
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;
.App {
text-align: center;
margin-top: 50px;
}
.App-header {
background-color: #282c34;
padding: 20px;
color: white;
}
Explanation
HTML: Defines the structure of your content. In React, JSX (JavaScript XML) is used to write HTML-like syntax within JavaScript files.
CSS: Styles the content, making it visually appealing. In React, you can import CSS files directly into your components.
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)