React Home

ReactJS is a powerful JavaScript library used for building user interfaces (UIs). It simplifies development by providing components, states, and hooks, reducing the amount of code needed.

Creating a React App with create-react-app

Open Your Terminal: Navigate to the directory where you want to create your application.

Create a React Application: Use the following command to create a React application named my-react-app:

npx create-react-app my-react-app

Alternatively, create the app in the current directory:

npx create-react-app .

Note: Ensure your folder name doesn't contain spaces or capital letters due to npm naming restrictions.

Navigate to the App Directory: If you specified a folder name, enter that directory:

cd directory-name

Start the Application: Start the React application with:

npm start

Now your development server is running, and you can view your app in the browser.

 

Creating a React App with Vite

Open Your Terminal: Navigate to the directory where you want to create your application.

Create a React Application: Use the following command to create a React application named my-react-app with Vite:

npm init @vitejs/app my-react-app --template react

Alternatively, create the app in the current directory:

npm init @vitejs/app .

Navigate to the App Directory: If you specified a folder name, enter that directory:

cd directory-name

Install Dependencies and Start the Application: Install dependencies and start the application with:

npm install
npm run dev

Now your development server is running using Vite, and you can view your app in the browser.

 

Hello World Example

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

const App = () => {
  return (
    <div id="root">
      <h1>Hello, world!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

In this example, we're rendering an <h1> tag inside a <div> with the id 'root'. You can change 'root' to any other valid ID to render your app elsewhere.