Getting started with create-react-app Cli tutorials | reactjs Cli tutorials


In this blog post, we are going to learn the creation of React Application using React CLI tool.

React CLI tool introduction

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

Node and NPM command installation

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

B:\Workspace\blog>node --version  
v8.10.0  
B:\Workspace\blog>npm --version  
5.6.0  

  

if this gives correct version numbers, then we can assume that NodeJS installed correctly.

create-react-app cli npm package installation

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

B:\Workspace\blog\reactapp>create-react-app --help  
Usage: create-react-app  [options]  
  
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  
  --use-npm  
  --use-pnp  
  -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:  
      https://github.com/facebook/create-react-app/issues/new  

Once cli is installed, Create a React Application

Create React Hello world application using cli tool 

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

B:\Workspace\blog\reactapp>create-react-app helloworldreact  
  
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 fsevents@1.2.4: The platform "win32" is incompatible with this module.  
info "fsevents@1.2.4" 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  
├─ react-dom@16.5.2  
├─ react-scripts@2.0.5  
└─ react@16.5.2  
info All dependencies  
├─ babel-plugin-dynamic-import-node@2.2.0  
├─ babel-preset-react-app@5.0.4  
├─ confusing-browser-globals@1.0.4  
├─ eslint-config-react-app@3.0.4  
├─ object.assign@4.1.0  
├─ react-dev-utils@6.0.5  
├─ react-dom@16.5.2  
├─ react-error-overlay@5.0.5  
├─ react-scripts@2.0.5  
└─ react@16.5.2  
Done in 353.50s.  
  
Success! Created helloworldreact at B:\Workspace\blog\reactapp\helloworldreact  
Inside that directory, you can run several commands:  
  
  yarn start  
    Starts the development server.  
  
  yarn build  
    Bundles the app into static files for production.  
  
  yarn test  
    Starts the test runner.  
  
  yarn eject  
    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:  
  
  cd helloworldreact  
  yarn start  
  
Happy hacking!  

create-react-app folder structure explanation

Here is folder structure of react application

react app folder structure

package.json file

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

"dependencies": {  
    "react": "^16.5.2",  
    "react-dom": "^16.5.2",  
    "react-scripts": "2.0.5"  
  }  

Application scripts to start/build/test the application

"scripts": {  
    "start": "react-scripts start",  
    "build": "react-scripts build",  
    "test": "react-scripts test",  
    "eject": "react-scripts eject"  
  }  

node_modules folder
This contains direct and indirect dependencies of a react application defined in package.json
public folder
This folder contains static assets of a react application. This contains following files
index.html - This is starting and entry of an application
favicon.ioc - react application favorite header icon
manifest.json - This is the configuration for a progressive web application. This contains shortcut icons for android and IOS when added using add as home screen feature.
src folder
This is actual javascript source code of react web app. This contains js and css and svg

react app development server start

Application folder is created and now it is time to start the development server. Please issue the below npm command to start the server

B:\Workspace\blog\reactapp\helloworldreact>npm start  
  
> helloworldreact@0.1.0 start B:\Workspace\blog\reactapp\helloworldreact  
> react-scripts start  
  
Compiled successfully!  
  
You can now view helloworldreact in the browser.  
  
  Local:            http://localhost:3000/  
  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

create-react-app cli example

Kiran

Similar Posts