ReactJS – Installation
To set up a ReactJS project, you can either use a pre-configured tool like Create React App (CRA) or manually set up your environment. Below are the most common ways to install and start working with ReactJS.
1. Install Prerequisites
Before installing React, ensure you have the following installed:
- Node.js and npm (Node Package Manager):
- Download and install from Node.js official website.
- Verify installation:
node -v
npm -v
- Code Editor (Recommended: Visual Studio Code).
2. Using Create React App (Recommended for Beginners)
Create React App is the easiest way to start with React, as it provides a boilerplate setup with zero configuration.
Steps:
- Open a terminal and run:
npx create-react-app my-app
- npx ensures you’re using the latest Create React App package.
- Replace my-app with your desired project name.
- Navigate to the project folder:
cd my-app
- Start the development server:
npm start
- Opens the default React application in your browser at http://localhost:3000
Terminal commands and logs
C:\Users\Anuj> d:
PS D:\> cd .\React_Project\
PS D:\React_Project> npx create-react-app my-app
npx : File D:\Program Files\nodejs\npx.ps1 cannot be loaded because running scripts is disabled on this system. For
more information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ npx create-react-app my-app
+ ~~~
+ CategoryInfo : SecurityError: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
PS D:\React_Project> Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass
Execution Policy Change
The execution policy helps protect you from scripts that you do not trust. Changing the execution policy might expose
you to the security risks described in the about_Execution_Policies help topic at
https:/go.microsoft.com/fwlink/?LinkID=135170. Do you want to change the execution policy?
[Y] Yes [A] Yes to All [N] No [L] No to All [S] Suspend [?] Help (default is "N"): Y
PS D:\React_Project>
PS D:\React_Project> npx create-react-app my-app
Creating a new React app in D:\React_Project\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
added 1314 packages in 37s
259 packages are looking for funding
run `npm fund` for details
Initialized a git repository.
Installing template dependencies using npm...
added 46 packages, and changed 1 package in 5s
263 packages are looking for funding
run `npm fund` for details
Removing template package using npm...
removed 1 package, and audited 1360 packages in 3s
263 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 my-app at D:\React_Project\my-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 my-app
npm start
Happy hacking!
PS D:\React_Project> dir
Directory: D:\React_Project
Mode LastWriteTime Length Name
---- ------------- ------ ----
d----- 30-11-2024 13:49 my-app
PS D:\React_Project> cd .\my-app\
Files and its hierarchy after creating CRA – (Create React App) project as my-app.
D:\React_Project\my-app> npm start
> my-app@0.1.0 start
> react-scripts start
(node:26016) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:26016) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
Compiled successfully!
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.37:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
3. Manual Setup
If you want more control over your project or to understand React’s internals better, you can set up a React environment manually.
Steps:
- Create a project folder and navigate into it:
mkdir my-react-app
cd my-react-app
- Initialize the project with npm:
npm init -y
- Install React and React DOM:
npm install react react-dom
- Install a bundler (e.g., Webpack) and a transpiler (e.g., Babel):
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev
- Create necessary files:
- src/index.js : Entry point for your React application.
- public/index.html : Base HTML file.
- Configure Webpack:
- Create webpack.config.js to bundle your React application.
- Run the application:
npx webpack serve
This method requires more configuration, such as Babel presets and Webpack settings.
4. Using Vite (Alternative to CRA)
Vite is a modern build tool that offers faster startup times compared to CRA.
Steps:
- Run the following to create a React project:
npm create vite@latest my-app --template react
- Navigate to the project folder:
cd my-app
- Install dependencies:
npm install
- Start the development server:
npm run dev
Terminal commands and logs
PS D:\React_Project\my-react-app\my-app> npm install
added 210 packages, and audited 211 packages in 15s
99 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
PS D:\React_Project\my-react-app\my-app>
PS D:\React_Project\my-react-app\my-app> npm run dev
> my-app@0.0.0 dev
> vite
VITE v6.0.1 ready in 360 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
5. Using Online Editors
If you want to try React without setting up a local environment, use online tools:
- CodeSandbox: codesandbox.io
- StackBlitz: stackblitz.com
Recent Comments