Why need build workflow in React.js

React JSJavascript LibraryFront End Technology

BUILDING A WORK-FLOW HELPS IN DOING BELOW THINGS

  • It optimizes code
  • Using next-gen JavaScript (ES6)
  • Its a standard way for single/multiple page apps
  • Productive approach
  • Easy integration of dependencies with NPM or Yarn
  • Use of bundler like web-pack for easier modular code and shipping code
  • Pre compiler like Babel
  • We can use a local development server to test app

Building workflow looks complex but React community has made it simple for us with a single command

create-react-app.

To use create-react-app, we will need to have node js install on our machine.

You can check if node is installed using below command on terminal −

node –version

If not installed already, please install the latest node js. Along with node js, npm also gets installed.

To check npm , use below command on terminal −

npm -version

npm is a node package manager which helps us in handling dependencies of project. yarn is also a similar tool.

Once above steps are done then let's create react app.

  • npm install -g create-react-app
  • create-react-app my-app
  • cd my-app
  • npm start

Description of these commands as below −

  • npm install -g create-react-app => It install a global configuration for react which can build a commonly used workflow for single page app.

    It may require to add sudo keyword before executing this command on linux/mac os

  • create-react-app my-app => With this command it creates a project with name my-app with all common build workflow.
  • cd my-app => We go inside my-app folder
  • npm start => It starts our my-app on local development server generally on port 3000

We can close development server using ctrl + c on the same terminal.

package.json file contains the dependencies required for project.

{
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-scripts": "3.0.1"
   },
   "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
   },
   "eslintConfig": {
      "extends": "react-app"
   },
   "browserslist": {
      "production": [
         ">0.2%",
         "not dead",
         "not op_mini all"
      ],
      "development": [
         "last 1 chrome version",
         "last 1 firefox version",
         "last 1 safari version"
      ]
   }
}

As you can see, we have react, react-dom and react-scripts dependencies added already.

When we run npm start, it actually runs (react-scripts start) command from above file.

Similarly, build command runs. It optimizes our code without running development server and create ready to use files.

Node modules contains all the other required dependencies but we generally don't need to do anything there.

PUBLIC FOLDER

We have an important file in public folder and that is index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
. This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

Our scripts file will be injected into this index.html file by workflow itself thats why we dont need to add manually.

It renders the React component on below line of index.html

<div id="root"></div>

SRC FOLDER

In src folder, we have index.js file, inside this file we get the root div from index.html file and mounts our app there.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

We are getting the content from app.js file. Feel free to edit text inside the render method and see the changes on browser

import React from 'react';
import logo from './logo.svg';
import './App.css';
x
function App() {
   return (
      <div className="App">
         <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
            Edit <code>src/App.js</code> and save to reload.
            x </p>
            <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
            >
            Learn React
            </a>
         </header>
      </div>
   );
}
export default App;
raja
Published on 04-Sep-2019 18:04:28
Advertisements