Scribd
Upload
9 views

Day21 ReactJS Introduction Components Slides

Uploaded by

Warstilide49
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Day21 ReactJS Introduction Components Slides

Uploaded by

Warstilide49
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

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

You might also like