React is a popular JavaScript library developed by Facebook for building fast, interactive, and scalable user interfaces, particularly for single-page applications (SPAs). It allows developers to build complex UIs using reusable, component-based architecture, making the development process more efficient and maintainable. React uses a virtual DOM to optimize rendering performance, ensuring smooth and responsive applications. In this tutorial, we’ll go through the process of creating a simple React application from scratch.
| Directory/File | Description |
| node_modules/ | Contains installed dependencies; auto-generated by npm. |
| public/ | Holds static files served directly to the browser (e.g., index.html, favicon.ico). |
| src/ | Main application source code. |
| └─ components/ | Contains reusable UI components like Sidebar.js, Button.js, etc. |
| └─ pages/ | Contains page-level components for different routes (e.g., Home.js, About.js). |
| └─ assets/ | Stores static resources like images, videos, and fonts. |
| └─ App.js | Main React component that sets up layout and routing. |
| └─ index.js | Application entry point; renders the App component. |
| └─ index.css | Global CSS styles, including layout for sidebar and main content. |
| └─ App.css | Component-specific styles (optional, usually for the App component). |
| .gitignore | Specifies files and directories to exclude from version control. |
| package.json | Project configuration file that lists dependencies and npm scripts. |
| package-lock.json | Automatically generated file that locks the versions of dependencies. |
| README.md | Documentation file providing an overview, setup instructions, and usage guide. |
Install Node.js. Download and install the latest LTS version from nodejs.org. Verify the installation using the following commands:
node -v npm -v
Download and install VS Code. Open a new folder for your project.
Open the terminal in VS Code.
Run these commands to set up the project and create a React App:
npx create-react-app my-app cd my-app
Install web-vitals:
npm install web-vitals
Installs all dependencies listed in package.json, ensuring the project has all required packages to run.
npm install
Start the Development Server.
npm start
Visit the test site to view the app in your browser
http://localhost:3000
Add a New Component. Create new file src/Greeting.js with the following code:
import React from 'react';
function Greeting() {
return <h2>Welcome to my React App!</h2>;
}
export default Greeting;Then, import the new component into App.js:
import Greeting from './Greeting';
function App() {
return (
<div>
<h1>Welcome to my App!</h1>
<Greeting />
</div>
);
}
export default App;Add Interactive Features with React Hooks
React components become more engaging when they can respond to user actions. In this step, we’ll introduce useState, a built-in React hook that allows components to have state. We’ll create a simple counter that tracks the number of button clicks.
Open your src/Greeting.js file and update it like this:
import React, { useState } from 'react';
function Greeting() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Welcome to my React App!</h2>
<p>You clicked {count} times.</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Greeting;Style Your App with CSS
Open the src/App.css file and add the following styles:
body {
font-family: 'Arial', sans-serif;
text-align: center;
margin-top: 50px;
background-color: #f0f2f5;
}
button {
padding: 10px 20px;
margin-top: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}