how to setup react project using create react app

SETUP REACT PROJECT USING CREATE REACT APP

React JS, Blog, React JS Freelancer / By / July 25, 2024

How To Set Up React Project with Create React App

Introduction

React Js is a powerful library for creating front end application with having support on client side and server side rendering. it has achieved popularity by creating an application with simple step by using virtual dom and JSX called syntax extension to JavaScript.
Virtual Dom is virtual representation of UI element node which is stored in memory and always synced with Real dom using a library ReactDom and this process is called reconciliation

In the starting, create a new react project was very complicated multi step process which involved build setup, code transpiler to convert modern javascript syntax to code which is readable by all browsers and also project base directory structure but now days create react app has all necessary javascript library and package which we need to create and run a react project including build system, linting configuration, unit test cases and also transpiler.

In other words, now we do not have to worry to about setup build process like webpack, babel plugin to transpile your code to code which is readable by all browsers and also not worry about to setup unit test cases environment means create react app cli command single handle configure all sort of complicated setup in one go automatically.

Prerequisites

Steps 1 – Creating new react Project / setup react project using create react app cli

In this step, you will create a new react project using node package manager – npm which is already installed on your machine along with node js installation step and npm includes npx tool which will help to run the executable package
To create the base project using create react app, run the following the command

npx create-react-app sample-app

And this will run some script and install all required thing and basic project code structure and once script finish, you will see the following message


Creating a new React app in /Users/<user-id>/Desktop/workspace/sample-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1490 packages in 34s

258 packages are looking for funding
  run `npm fund` for details

Initialized a git repository.

Installing template dependencies using npm...
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@testing-library/dom@10.1.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.10.0' }
npm WARN EBADENGINE }

added 67 packages, and changed 1 package in 3s

262 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@testing-library/dom@10.1.0',
npm WARN EBADENGINE   required: { node: '>=18' },
npm WARN EBADENGINE   current: { node: 'v16.14.2', npm: '8.10.0' }
npm WARN EBADENGINE }

removed 1 package, and audited 1557 packages in 1s

262 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Created git commit.

Success! Created sapmple-app at /Users/pr4deep94/Desktop/workspace/sapmple-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd sample-app
  npm start

Step 2 : Go to project folder

cd sample-app

Step 3: To run the project, use the below commands

npm start

This command will run react-scripts to build and run your application on your localhost. once this finish, you will see the below message and you can run this address in your browser http://localhost:3000 and then you are all set to see your first react application

Compiled successfully!

You can now view sapmple-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Conclusion:

Here we summarised about how to create react project using create react app.

If you are looking for react js job support/ react proxy, here is you can connect with us – react js job support service
React official link – https://react.dev/

Must Read