Sunday, October 14, 2018

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

Related article


EmoticonEmoticon