Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why need build workflow in React.js
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;
600 Views
