Create React JS project

afrin_ashar

Afrin Ashar

Posted on October 11, 2024

Create React JS project
  1. Install Node.js and npm First, ensure that you have Node.js and npm installed. You can download them from Node.js Official Website.

Check Node.js version:

node -v

Enter fullscreen mode Exit fullscreen mode

Check npm version:

npm -v
Enter fullscreen mode Exit fullscreen mode
  1. Create a New React Project Using Create React App You can use the official Create React App tool to quickly set up a React project.

Open your terminal (Command Prompt or any terminal you use).

Run the following command to install create-react-app globally (optional if you haven't installed it before):

npm install -g create-react-app
Enter fullscreen mode Exit fullscreen mode

Create your React app by running the following command:

npx create-react-app my-app
Enter fullscreen mode Exit fullscreen mode

Replace my-app with the name of your project.

  1. Navigate into the Project Folder Once the app is created, move into the project directory:
cd my-app
Enter fullscreen mode Exit fullscreen mode
  1. Start the Development Server To start the development server and see the app running in your browser, run:
npm start
Enter fullscreen mode Exit fullscreen mode

This will open http://localhost:3000 in your browser, and you’ll see the default React landing page.

  1. Edit Your React App You can now start editing the project files located inside the src folder. The main file is src/App.js, where you can modify the content to get started with your custom React project.

Folder Structure:


my-app/
  ├── node_modules/
  ├── public/
  ├── src/
  ├── .gitignore
  ├── package.json
  ├── README.md
  └── yarn.lock or package-lock.json
Enter fullscreen mode Exit fullscreen mode
  1. Build for Production When you're ready to deploy your app, you can create a production build using the command:
npm run build
Enter fullscreen mode Exit fullscreen mode

This will create an optimized production build of your React app in the build/ directory.

💖 💪 🙅 🚩
afrin_ashar
Afrin Ashar

Posted on October 11, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related