Scribd
Upload
6 views

Module 1 - Introduction to React JS

This document is a study guide on React JS, detailing its definition, key features, and installation process. It includes step-by-step instructions for setting up React, creating a project, and understanding the basic file structure and flow of a React application. Additionally, it provides a series of questions and answers related to React concepts and commands.

Uploaded by

Priyanka Yadav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Module 1 - Introduction to React JS

This document is a study guide on React JS, detailing its definition, key features, and installation process. It includes step-by-step instructions for setting up React, creating a project, and understanding the basic file structure and flow of a React application. Additionally, it provides a series of questions and answers related to React concepts and commands.

Uploaded by

Priyanka Yadav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like