React toolchain | Creating a new react app.

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-name
cd app-name
npm 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:

1. README.md
2. node_modules
3. package.json
4. .gitignore
5. public
6. 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.