ReactJS is one of the most popular JavaScript libraries for building modern, interactive user interfaces — especially for single-page applications (SPAs). Developed and maintained by Facebook, React allows developers to build reusable UI components and manage the state of their applications efficiently.
In this tutorial, we’ll walk through the basics of ReactJS, including how to set up your first project, understand components, and manage simple state using hooks. Whether you're a complete beginner or transitioning from plain HTML/JavaScript, this guide is for you.
✅ Why Learn ReactJS?
-
⚡ Fast and efficient rendering with the Virtual DOM
-
♻️ Reusable components for cleaner, modular code
-
🌎 Huge ecosystem and community support
-
🔄 Easy state management with React Hooks
🛠️ Prerequisites
Before diving in, make sure you have the following installed:
📦 Setting Up Your First React App
React offers a powerful command-line tool called Create React App to bootstrap your project:
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
After running this, your browser should open a development server at http://localhost:3000.
📁 Understanding the File Structure
my-first-react-app/├── public/├── src/│ ├── App.js│ ├── index.js
index.js: Entry point of the appApp.js: Main application component
🧩 Creating Your First Component
React components can be written as JavaScript functions:
1 2 3 4 5 6 7 8 | // src/components/Greeting.js import React from 'react'; function Greeting() { return <h2>Hello, welcome to React!</h2>; } export default Greeting; |
Now use this in App.js:
1 2 3 4 5 6 7 8 9 10 11 12 | import React from 'react'; import Greeting from './components/Greeting'; function App() { return ( <div> <Greeting /> </div> ); } export default App; |
🧠 Introducing State with Hooks
React Hooks allow you to use state and lifecycle features in functional components.
1 2 3 4 5 6 7 8 9 10 11 12 | import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } |
Then include <Counter /> in your App.js.
🎨 Styling in React
You can apply inline styles or use CSS files.
Using CSS:
1 2 3 4 5 | /* App.css */ .title { color: blue; font-family: Arial; } |
1 2 3 4 5 6 | // App.js import './App.css'; function App() { return <h1 className="title">Styled Title</h1>; } |
📦 Bonus: JSX Basics
JSX is a syntax extension that lets you write HTML inside JavaScript:
const element = <h1>Hello JSX!</h1>;
JSX must return a single parent element — wrap multiple tags in a <div> or React Fragment (<> </>).
