React Home

ReactJS is a powerful, open-source JavaScript library maintained by Meta (formerly Facebook) and a massive community of developers. It is designed specifically for building modern user interfaces (UIs) that are fast, modular, and easy to maintain.

Instead of manual DOM manipulation—where you have to tell the browser exactly which element to change—React uses a "declarative" approach. You describe what the UI should look like for a given state, and React handles the heavy lifting of updating the screen efficiently. This is achieved through a Component-based architecture, where you break your UI into small, reusable pieces of code.

Creating a React App with create-react-app

For a long time, create-react-app (CRA) was the standard way to start a React project. It provides a "batteries-included" environment, meaning it sets up everything from build scripts to testing tools right out of the box.

Open Your Terminal: Open your command prompt, terminal, or VS Code integrated terminal and navigate to the folder where you want your project to live.

Create a React Application: Run the following command. This will create a new folder called my-react-app with all the necessary boilerplate code:

npx create-react-app my-react-app

Alternatively, if you have already created a folder and are currently inside it, you can run:

npx create-react-app .

Navigate to the App Directory: Move into your project folder before trying to run any commands:

cd my-react-app

Start the Application: Launch the development server:

npm start

Now your development server is running, and you can view your app in the browser at http://localhost:3000.

Creating a React App with Vite

In modern web development, many developers have shifted from CRA to Vite. Vite is significantly faster because it uses a different way of handling file updates (Hot Module Replacement), making your coding experience much smoother.

Open Your Terminal: Navigate to your desired working directory.

Create a React Application: Use the modern Vite initialization command. You will be prompted to choose a framework; select React and then JavaScript or TypeScript:

npm create vite@latest my-react-app -- --template react

Alternatively, to start in your current directory:

npm create vite@latest . -- --template react

Navigate to the App Directory:

cd my-react-app

Install Dependencies and Start the Application: Unlike CRA, Vite does not install dependencies automatically. You must run the install command first:

npm install
npm run dev

Now your development server is running using Vite, usually at http://localhost:5173.

Hello World Example

Once your project is set up, you'll see a lot of files. The "entry point" of a React application is where we tell React to take our code and inject it into the HTML page. In modern React (Version 18+), we use createRoot.

import React from 'react';
import ReactDOM from 'react-dom/client';

// This is a functional component
const App = () => {
  return (
    

      
Hello, world!
      
Welcome to your first React application.
    
  );
};

// Target the 'root' div in your index.html and render the App component
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In this example, we're creating a component called App. Inside the return statement, we use JSX (JavaScript XML), which looks like HTML but lives inside JavaScript. We then find a <div> with the ID of root (which exists in your public/index.html file) and tell React to render our component there.

By changing the content inside the <h1> or adding new tags, you can instantly see the changes in your browser thanks to React's fast refresh capabilities. This is the foundation of every React app you will build!