🧠 Basic ReactJS Programming Language Tutorial: Getting Started with Modern Web Development

 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:

• Node.js

• npm (comes with Node.js)

• A code editor like VS Code

---

📦 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 app
• App.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 (<> </>).