In this blog post, we are going to learn the creation of React Application using React CLI tool.
React Framework is an opensource component framework from Facebook for developing User interface applications. It is a popular library. For creating react application manually, It is very difficult to create react application. Manually need to add configuration required for creating react application. React Team provides create-react-app cli tool to create a React Application from scratch without writing manually. The following are prerequisite for creating react application
First Nodejs Installation on your operating system. NodeJs provides node and npm command line tools. Please issue the below command to check nodejs and npm installation
if this gives correct version numbers, then we can assume that NodeJS installed correctly.
Once node and npm is installed, Please install create-react-app npm package
npm install -g create-react-app
This will installs create-react-app npm package globally and create-react-app command works on any folder The below command checks create-react-app installation
Usage: create-react-app [options]
-V, --version output the version number
--verbose print additional logs
--info print environment debug info
--scripts-version use a non-standard version of react-scripts
-h, --help output usage information
Only is required.
A custom --scripts-version can be one of:
- a specific npm version: 0.8.2
- a specific npm tag: @next
- a custom fork published on npm: my-react-scripts
- a local path relative to the current working directory: file:../my-react-scripts
- a .tgz archive: https://mysite.com/my-react-scripts-0.8.2.tgz
- a .tar.gz archive: https://mysite.com/my-react-scripts-0.8.2.tar.gz
It is not needed unless you specifically want to use a fork.
If you have any problems, do not hesitate to file an issue:
Once cli is installed, Create a React Application
This is an example for react app creation using cli with an example
First, go to the directory where we need to create react application. This will install React boilerplate application with initial configuration
Creating a new React app in B:\Workspace\blog\reactapp\helloworldreact.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
yarn add v1.5.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info There appears to be trouble with your network connection. Retrying...
info email@example.com: The platform "win32" is incompatible with this module.
info "firstname.lastname@example.org" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
warning Your current version of Yarn is out of date. The latest version is "1.10.1", while you're on "1.5.1".
info To upgrade, run the following command:
$ curl -o- -L https://yarnpkg.com/install.sh | bash
success Saved 10 new dependencies.
info Direct dependencies
info All dependencies
Done in 353.50s.
Success! Created helloworldreact at B:\Workspace\blog\reactapp\helloworldreact
Inside that directory, you can run several commands:
Starts the development server.
Bundles the app into static files for production.
Starts the test runner.
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:
Here is folder structure of react application
This file contains all the meta information and dependencies of react application. Some of the configuration entries are as below
React application name using “name”: “helloworldreact” application current version using “version”: “0.1.0” private configuration to publish to npm registry using “private”: true Application dependencies using
Application scripts to start/build/test the application
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
Application folder is created and now it is time to start the development server. Please issue the below npm command to start the server
> email@example.com start B:\Workspace\blog\reactapp\helloworldreact
> react-scripts start
You can now view helloworldreact in the browser.
On Your Network: http://192.168.12.54:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
and output is