REACT Tutorial

Create Your First React App

In this tutorial, you will learn how to quickly set up and run your very first React application using the Create React App tool. This official React setup tool provides a simple way to start a new React project with zero configuration.

Step 1: Install Node.js and npm

React development requires Node.js and its package manager npm. To check if they are installed, open your terminal or command prompt and run:

node -v
npm -v
  

If not installed, download Node.js from nodejs.org and install it. npm comes bundled with Node.js.

Step 2: Create a New React App

Use the npx command to create a new React project named my-app:

npx create-react-app my-app
  

This will create a new folder called my-app with all necessary files and dependencies.

Step 3: Start the React Development Server

Navigate into your new app’s directory and start the development server with:

cd my-app
npm start
  

This command will open your React app automatically in your default web browser at http://localhost:3000. You will see a React welcome screen.

Step 4: Explore the Project Structure

Key folders and files created:

• public/ – Contains the static HTML file.
• src/ – Contains React components and main JavaScript files.
• package.json – Holds project metadata and dependencies.

Step 5: Modify Your First Component

Open src/App.js in a code editor and change the content inside the <div> with something like:

return (
  <div style={{ textAlign: 'center', marginTop: '50px' }}>
    <h1>Hello, React!</h1>
    <p>Welcome to your first React application.</p>
  </div>
);
  

Save the file and see your changes instantly reflected in the browser thanks to React’s hot reloading feature.