Study Guide
Author
Srinivas Dande
Java Learning Center 1 React JS
Introduction to React JS
What is React JS?
React JS is an open source client side JavaScript Library.
React JS is developed by Facebook.
React JS is not comprised of a full-featured framework .It is a JavaScript library
which focuses only on one specific thing and ensures to do it properly. It is
generally considered to have V in the MVC pattern.
React JS empowers developers to build application that live on the web, mobile or
desktop.
Built on JSX and uses EC6 Features.
Key features of React JS.
Client Side Scripting
Best in Performance
Device Independent
OS Independent
Mobile Rendering
Rich UI
Data binding
Components
Modular Approach
HTTP Calls
SPA/Routing
Redux
Hot Skill in 2021
Java Learning Center 2 React JS
Setup React JS
1) Install Node JS(14.15.4)
Download from https://nodejs.org/en
Install to E:\NodeJS-14
2) Observe the following after Installation :
You can see npm folder under C:\Users\SRINIVAS\AppData\Roaming\npm
NodeJS installed under E:\NodeJS-14
3) Both npm folder and E:\NodeJS-14 folder will be set to path automatically by the
Installers.
4) If any problem for your path then you can set path to npm folder and E:\NodeJS-14
folder as follows.
At Command Line:
set path = %path%;E:\NodeJS-14;
System Environment Variables:
Add this to path - E:\NodeJS-14
At Command Line:
set path = %path%;C:\Users\SRINIVAS\AppData\Roaming\npm;
System Environment Variables:
Add this to path - C:\Users\SRINIVAS\AppData\Roaming\npm
5) check the installation:
npm --version
6) Install Visula Source Code
Download from https://code.visualstudio.com/Download
Install to E:\VSCode
7) Insall React JS CLI
Go to command prompt and type the following
npm install -g create-react-app
Java Learning Center 3 React JS
8) Create your First React project.
Create the folder to keep all of your React projects and go to that folder
D:\ReactJS\MyLabs> create-react-app lab1
9) Start the Server
D:\ReactJS\MyLabs> cd lab1
D:\ReactJS\MyLabs\lab1> npm start
10) Check the browser which is opened with url.
http://localhost:3000
11) Open your React project in VS Code Editor
12) Explore the IMP files from React Project.
A. package.json =>
All the dependencies required for React project
NPM download all dependencies based on this file only.
B. index.html=>
Starting Point of the Application while rendering.
C. index.css =>
global styles goes here
D. index.js =>
Backing the index.html
E. App Componet related files=>
app.js (App Component Template)
app.css (App Component CSS) ---local styles goes here
app.test.js (App Component Unit Tests)
F. Do the following Changes in the First React Project.
a. Update index.html
b. Update index.css
c. Update index.jss
d. Update App.js
e. Update App.css
Java Learning Center 4 React JS
Lab1 : Files Required
1. index.html 2. index.js
3. index.css 4. App.js
5. App.css
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Best React Training</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="myroot">
</div>
</body>
</html>
2. index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Java Learning Center 5 React JS
3. index.css
4. App.js
import React from 'react';
import './App.css';
const App = () => {
const companyName = "Java Learning Center";
let courseName="React 16";
return (
<div className="myclass">
<p className="myclass1"> Welcome to {companyName}</p>
<p className="myclass2"> You are learning {courseName} from Srinivas Dande</p>
</div>
);
}
export default App;
5. App.css
.myclass1{
font-size: 25px;
color:red;
text-align: center;
font-family: Cambria;
}
.myclass2{
font-size: 20px;
color:blue;
text-align: center;
font-family: Cambria;
}
.myclass {
border: 2px solid red;
border-radius: 5px;
}
Java Learning Center 6 React JS
Basic Flow:
1) When send the request to localhost:3000 then initial file to render is index.html
2) index.html has <div> whose id is myroot
3) Checks the index.js and render() function will be called
ReactDOM.render(<App />, document.getElementById('myroot'));
4) Render function includes the <App/> component under <div> whose root is myroot.
5) Finally index.html will be displayed.
Questions:
Q1) How to install the React?
Ans:
npm install -g create-react-app
Q2) How to create the React Project?
Ans:
create-react-app myapp
Q3)How to Run the React Project?
Ans:
npm start
Q4) How to build the React Project?
Ans:
npm run-script build
Q5) How to Run Unit Tests of React Application?
Ans:
npm run-script test
Q6) What is the Default Starting point of rendering in React application?
Ans:
index.html
Q7) What is the default Component?
Ans:
App Component ( App.js)
Java Learning Center 7 React JS
Q8)What are various files of App Component?
Ans: .
App.js (Contains JSX)
App. css (Component CSS)
App.test.ts (Component UnitTest).
Q9) How to use React Component?
Ans:
React Component can be used in two ways.
1)with HTML(JSX)
<Hello/>
2)with Component Class.
h:Hello=new Hello()
Q10) What is JSX?
Ans:
Extended Java Script. We are writing React Components with JSX only .
Below is the JSX Code , Not the HTML.
<div className="myclass">
<h2> Hello Guys </h2>
</div>
Q11)What is npm?
Ans:
Npm - Node Package Manager
npm is part of NodeJS.
npm is reponsible to download and manage the packages required for your project
npm version : 6.14.6
Q12) How to Uninstall React?
Ans:
npm uninstall -g create-react-app
Q13) How to Uninstall Node JS?
Ans:
Uninstall from Settings section.
Note : Above UnInstallation Process has to clean both npm and npm-cache folders
if not happened then remove manually.
Java Learning Center 8 React JS
