How to create react app
Increase your technical knowledge through our FSH Infotech Blog section.
We add various blog categories that is related to IT technologies.
You can find more blogs added by our administrator by using the below link. Click here for more blogs
We know that react js is an open-source and free front-end JavaScript library for building user interfaces based on components. Here in this blog, we learn how to create a react app and things which are associated with it.
We can create a new react app by using the integrated toolchains to better development and user experience.
React Toolchain:
A react toolchain is an npx cli for generating react apps. By using this tool we can generate projects with less boilerplate that are ready to use right away.
By using the toolchain in react we have several advantages listed below:
- We can scale many files and components
- It enables us to use npm modules and other third party libraries
- Compilation and other issues can be recognized earlier
- Optimization for production
We can also use react without using this toolchain, to use so we can use by adding react as plain javascript by including in the webpage.
By including react js script we can use react on the web pages.
List of toolchains:
- Create react app
- Next js
- Gatsby
- Neutrino
- Nx
- Parcel
- Razzle
In this tutorial blog we only try to explain creating the react web application by the first toolchain i.e., create react app
Create React App :
This can be used when we are starting learning the react JS or creating the new react app. This can be more easy and flexible way to create react apps.
This is a comfortable environment to get started and to learn react.
Create react app sets up our development environment so that we can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
By using this method it will take around 2-3 mins and the progress can also be showed on the command prompt.
Steps to install react app by using create react app:
npx create-react-app app-namecd app-namenpm start
The npx on first step is a package runner tool that comes with npm (node package manager) and is available only for npm versions greater than 5.2
Create react app does not handle databases and other backend and functional logics, it will only provide a frontend part which can be later integrated with the backend API's to make it functional and working on real time.
The command npm run build will be used to optimize the react app for production and creates a build folder.
We can also create a react app that uses typescript using the template by following command
npx create-react-app my-react-app --template typescript
By running the above commands we can be able to see a folder and files which are automatically generated. They will be:
- README.md
- node_modules
- package.json
- .gitignore
- public
- src
README.md
This is a markdown file that will help us to learn react app and some helpful tips are contained in it.
node_modules
This folder contains all the dependency and their source codes, we should not rewrite or modify any files in this folder, its contains inbuilt files and folders when we install any npm package from the registry.
package.json
It contains the list of dependencies which we are using on our react app, each package has version number mentioned in the file to help us what we are using.
.gitignore
This files helps us to exclude files and folders that should not be tracked by the git.
public
public folder contains our assets and the resources which can be available to the end user like images, css and other files
src
This a a source folder where we write all the react code, all the components, classes and react related code will be available in this folder including routes, this is the primary folder that should be taken into consideration by a react developer.
Useful links: