In this Article, you will learn how to create a simple React app.
Prerequisites
1.
Install Node.js
and NPM
2.
Install Visual
Studio Code
Create React app
1.
We will use create-React-app NPX tool
to create a simple React app.
2.
Open Node.js command prompt.
3.
Navigate to the respective folder, where you want to create
React app.
4.
Type the command given below in a console to install create-React-app using
NPX tool.
npx create-react-app myblog
5.
Navigate to the myblog folder.
6. Type the command code . in a console to open the app in Visual Studio code.
7.
React app will have the folder structure given below.
8.
Type the command given below in a console to launch React app in
the Browser.
npm start
In the previous section, you learned
how to install and create a project in React. Now, whenever we create a
React project, it automatically creates a lot of files and folders. So, in this
article, I am going to explain what these files and folders are.
When we create a React project, our application's structure looks like this.
node_modules
The node_modules folder holds all the dependencies and sub-dependencies
of our project. We only had React, React DOM and React scripts but React
scripts have a lot of other dependencies which are present inside this folder.
Public folder
Basically, this folder contains 3 files as we have seen.
- favicon.ico - it is an
icon file which contains an icon which displays on the browser.
- index.html - it is an
important file. Due to this file, the public folder, known as “root
folder”, gets served by the web server in the end. Index.html is a single
HTML page present in this project.
- manifest.json - this file
contains a lot of information related to our application like short_name,
name, icons, start_url, display etc. We can also define other metadata
about our application.
src folder
This folder contains actual source code for developers. This is the
place where our React application is present. We can create our own
subdirectory inside this directory. For faster rebuilds, files inside only this
folder are processed by Webpack. However, this folder already contains the
following files.
- App.css - this file
gives some CSS classes or we can say some styling which is used by App.js
file.
- App.js - App.js is a
sample React component called “App” which we get for free when creating a
new app.
- App.test.js - this is
the test file which basically allows us to create the unit tests for
different units or we can say for different components.
- index.css - it stores
the base styling for our application.
- index.js - index.js
stores our main Render call from ReactDOM (more on that later). It imports
our App.js component that we start with and tells React where to render it
(remember that div with an id of root?).
- logo.svg - this is
Scalable Vector Graphics file which contains the logo of Reactjs. By this
file, we are able to see ReactJS logo on the browser.
- registerServiceWorker.js
- as its name applies, it is important for registering a service
which is generated automatically and creates Progressive Web Apps which
are necessary for mobile React Native apps.
Package.json
It is a standard file found in every project. It contains the
information like the name of project, versions, dependencies etc. Whenever we
install a third party library, it automatically gets registered into this file.
Example - content of package.json file
A point to be remembered at the time of working with React applications is that, for the project to build, these files must exist with exact filenames.
- public/index.html is the
page template;
- src/index.js is the
JavaScript entry point.
We can delete or rename the other files.