Scribd
Upload
27 views

create-react-app steps

The document explains how to install React using the create-react-app (CRA) tool, which simplifies the setup process for beginners by avoiding manual configuration with webpack and babel. It outlines the prerequisites, including Node and NPM versions, and provides step-by-step commands for installing CRA and creating a new React project. Additionally, it describes how to edit the default App.js file and start the development server to view the application in a browser.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views

create-react-app steps

The document explains how to install React using the create-react-app (CRA) tool, which simplifies the setup process for beginners by avoiding manual configuration with webpack and babel. It outlines the prerequisites, including Node and NPM versions, and provides step-by-step commands for installing CRA and creating a new React project. Additionally, it describes how to edit the default App.js file and start the development server to view the application in a browser.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Using the create-react-app command

If you do not want to install react by using webpack and babel, then you can choose
create-react-app to install react. The 'create-react-app' is a tool maintained by Facebook
itself. This is suitable for beginners without manually having to deal with transpiling tools
like webpack and babel. In this section, I will be showing you how to install React using
CRA tool.

The Create React App is maintained by Facebook and can works on any platform, for
example, macOS, Windows, Linux, etc. To create a React Project using create-react-app,
you need to have installed the following things in your system.

1. Node version >= 8.10


2. NPM version >= 5.6

Install NodeJS and NPM

Install React

You can install React using npm package manager by using the below command. There
is no need to worry about the complexity of React installation. The create-react-app npm
package will take care of it.

1. > npm install -g create-react-app


Create a new React project

After the installation of React, you can create a new react project using create-react-app
command. Here, I choose jtp-reactapp name for my project.

1. > create-react-app jtp-reactapp


NOTE: You can combine the above two steps in a single command using npx. The npx
is a package runner tool that comes with npm 5.2 and above version.

1. > npx create-react-app jtp-reactapp


The above command will install the react and create a new project with the name jtp-
reactapp. This app contains the following sub-folders and files by default which can be
shown in the below image.
Now, to get started, open the src folder and make changes in your desired file. By
default, the src folder contain the following files shown in below image.

For example, I will open App.js and make changes in its code which are shown below.

App.js

1. import React from 'react';


2. import logo from './logo.svg';
3. import './App.css';
4.
5. function App() {
6. return (
7. <div className="App">
8. <header className="App-header">
9. <img src={logo} className="App-logo" alt="logo" />
10. <p>
11. Welcome To JavaTpoint.
12.
13. <p>To get started, edit src/App.js and save to reload.</p>
14. </p>
15. <a
16. className="App-link"
17. href="https://reactjs.org"
18. target="_blank"
19. rel="noopener noreferrer"
20. >
21. Learn React
22. </a>
23. </header>
24. </div>
25. );
26. }
27.
28. export default App;
NOTE: You can also choose your own favorite code editor for editing your project. But in
my case, I choose Eclipse. Using the below link, you can download Eclipse for Ubuntu
and install.

Running the Server

After completing the installation process, you can start the server by running the
following command.

1. > cd jtp-reactapp
2. > npm start
It will show the port number which we need to open in the browser. After we open it, you
will see the following output.

You might also like