Narasimha
Sr. Corporate Trainer, Mentor
Narasimha
Sr. Corporate Trainer, Mentor
Week5 – React JS
Day21 : Introduction, Components
Day22 : State, Events, Apply Styles
Day23 : Remote Server Calls, Debugging
Day24 : Redux, SPA with Routing
Day25 : Testing
Index – Day20
1. Introduction
a. What is React JS? Features?
b. Environment Setup
c. Project Creation & Execution
2. Virtual DOM
3. Components
a. JSX
b. Dynamic Presentation
c. Processing Arrays and Objects
d. Passing data using Props
e. Styling Components
What is React JS?
• ReactJS is a JavaScript library to create User Interfaces.
• React was first created by Jordan Walke software
engineer on Facebook.
• React was released in May 29, 2013.
• It is maintained by Meta (formerly Facebook)
• Main goal is to allow developers to create Web Apps
that are fast, simple and scalable.
Features
• Component Based
• Declarative Programming
• JSX – (JavaScript + XML)
• Virtual DOM
• Increase performance
• Redux Library
• Routing
Environment Setup
1. Install Node.JS
https://nodejs.org/en/download/
2. Install create-react-app module using NPM
npm install -g create-react-app
3. Visual Studio Code
https://code.visualstudio.com/download
Project Creation
1. create-react-app my-project
2. cd my-project
3. npm start
Note: Use Ctrl + C on command prompt to stop the
server
Project Structure
1. [node_modules]
2. [public]
a. Index.html
3. [src]
a. App.js
b. Index.js
Project Structure
index.js
index.html app.js
Virtual DOM
Narasimha
Sr. IT Trainer/Consultant
Component in React
• Components let you split the UI into independent,
reusable pieces, and think about each piece in
isolation.
• Conceptually, components are like JavaScript functions.
They accept inputs (called “props”) and return React
elements describing what should appear on the screen.
App Component
• Root component
• Execution Process starts from this component
• We need to refer all other components from App
component
• Contains actual view logic that is render/ display in
browser.
Types of Components
• Functional Component
• Class Component
Function Components
function App() {
return (
<div className="App">
<h3>Welcome to React Application</h3>
<hr/>
</div>
);
}
Class Components
import React from 'react';
class App extends React.Component
{
render() {
return (
<div className="App"> </div> );
}
}
export default App;
Data Handling in Components
• Scalar
• Arrays
• Objects
• Array of Objects
Data Handling in Components
let result = empsArrays.map( item =>
{
return <tr>
<td> {item.empno} </td>
<td> {item.ename} </td>
<td> {item.job} </td>
<td> {item.deptno} </td>
</tr>
});
JSX in React JS
• JSX is a syntax extension to JavaScript.
• React uses JSX to describe what the UI should look like.
• JSX used as template language, but it comes with the
full power of JavaScript.
• JSX produces React “elements” as JavaScript.
• Babel is a JavaScript compiler that compiles JSX code
into plain JavaScript code
JSX in React JS
var element = <div> Hello World </div>;
var element = React.createElement(
'div',
null,
'Hello world'
);
JSX in React JS
return (
<div> Hello World!!! </div>
);
return (
<div>
<p>Hello World</p>
<p>Hello World</p>
</div> );
Return Multiple Elements
return (
<React.Fragment>
<p>Hello World</p>
<p>Hello World</p>
</React.Fragment> );
Return Multiple Elements
return (
<>
<p>Hello World</p>
<p>Hello World</p>
</> );
JSX Expressions
{expression}
<h1> {uname} </h1>
<h1> Welcome to {uname} </h1>
<span> {10 + 20} </span>
<h1> { n % 2 == 0 ? ‘Even' : ‘Odd'} </h1>
{ // comment line }
JSX Expressions
<p> {sum(10, 20) } </p>
<img src={fileName} />
<p className="c1"> hello world </p>
<p style={ { color : "blue"} }> Hello World </p>
Hands-On Implementation
Practical Assignment
Narasimha
Sr. IT Trainer/Consultant
Props in Components
• “Props” is a special keyword in React
• It stands for properties
• It used for passing data from one component to
another.
• props are used like attributes in html tags.
Props in Components
<Demo uname="Narasimha" /> // Appjs
function Demo(props) {
return <div>
<h3> Welcome to {props.uname} </h3>
</div>;
}
Props in Components
function Demo(props) {
return <div>
<h3> Welcome to {props.name} </h3>
</div>;
}
Hands-On Implementation
Narasimha
Sr. IT Trainer/Consultant
Conditional Rendering
<td align="center" colspan="4">
{ (empsArrays.length == 0)?"No Employees are
available":"Employees Count : " + empsArrays.length }
</td>
Conditional Rendering
function SummaryRow(props) {
if(props.empsCount == 0) {
return (
<tr> <td colspan="4" align="center"> No Employees are available </td> </tr>
);
}
else {
return (
<tr> <td colspan="4" align="center"> Employees Count : {props.empsCount}
</td> </tr>
);
}
}
Conditional Rendering
if(props.isAdmin = true)
return <Admin />
else
return <Guest />
Practice Hands-Ons
