Quickly setup React project using npx

 

Prerequisites

Node.js and npm (or yarn) installed on your system.

 

Step 1: Create a New Project Directory ‘react-hello-world’.

 

Open your terminal or command prompt. Navigate to the desired directory where you want to create the project. Use the following command to create a new directory.

 

mkdir react-hello-world

 

Step 2: Initialize new react application.

 

Use the Create React App (CRA) tool to quickly set up the project structure. Go to the folder ‘react-hello-world’ and execute below command.

 

npx create-react-app .

 

This will create a new React project with the necessary files and dependencies.

 

Step 3: Open the Project in Your Code Editor.

Navigate to the react-hello-world directory in your code editor, I am using Visual Studio Code.

 

Step 4: Find the App.js File within the src directory. This file is the starting point of your React application.

 

Step 5: Replace App.js file with below content.

 

App.js

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

Step 6: Start the Development server by executing below command from the project directory.

npm start

Open the url ‘http://localhost:3000/’ in browser, you will see below screen.

You can download this application from this link.

Previous                                                    Next                                                    Home