ReactJS

JavaScript Library for building User

Interfaces
https://reactjs.org/

2
Contents
1. Overview
2. Environment Setup
3. First Project
4. JSX and Component

3
1. Overview
React is a JavaScript library for building fast and interactive user interfaces. It can
be used on client as well as with other frameworks like bootstrap
• It was developed by Facebook at 2011, also used by Netflix and Instagram.
• It is focus on building single web application.

Principles
Declarative
Design simple views for each state in your application, and React will efficiently
update and render just the right components when your data changes.

4
1. Overview
Component-Based
Build encapsulated components that manage their own state, then compose them
to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily
pass rich data through your app and keep state out of the DOM.
Learn Once, Write Anywhere
React can also render on the server using Node and power mobile apps
using React Native.

5
1. Overview
Features:
• JSX: JSX is JavaScript XML. It isn't necessary to use JSX in React development, but it
is recommended.
• Components: React is all about components. You need to think of everything as a
component. This will help you maintain the code when working on larger scale
projects.
• One-way Data Binding: React implements one-way data flow which makes it easy to
passed data in your app.
• Performance: It used virtual DOM to display virtual components.

6
2. Environment Setup
What do you need to run ReactJS?
• ReactJS requires NodeJS to run
o Install NodeJS and npm (Node.js)
• NPM stands for Node Package Manager
o You will need to install some node package through npm or npx
o You can also use yarn for installing Package.
o Visit: https://yarnpkg.com/en/docs/install#windows-stable for more detail.

7
2. Environment Setup
Create first Project
There are many ways to create React App Project but we will use create-react-app
Package.
1. Install Create React App Package:
$npm install -g create-react-app
2. Create app for your project
$create-react-app mey-app | npx create-react-app mey-app
*Note: npm naming restrictions are not allow capital letters project name
3. Navigate to your project directory and start running the app
$cd mey-app
$npm start

8
2. Environment Setup
Project Structure

9
2. Environment Setup
Run project: $npm start

10
3. JSX and Components

JSX = JavaScript + XML

React uses JSX for templating instead of regular JavaScript. It’s not necessary to use it,
however, there are some pros that come with it.
• It is faster because it performs optimization while compiling code to JavaScript.
• It is also type-safe and most of the errors can be caught during compilation.
• It makes it easier and faster to write templates, if you are familiar with HTML.

11
3. JSX and Components

JSX
It’s very similar to HTML except:
• If we want to return more elements, we need to wrap it with one container element.
• We can use our own custom attributes in addition to regular HTML properties and
attributes by using data- prefix.
• JavaScript expressions can be used inside of JSX by wrapping it with curly brackets {}
• We cannot use if else statements inside JSX, instead we can use conditional (ternary)
expressions.

12
3. JSX and Components

Sample

class ShoppingList extends React.Component {

render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}

13
3. JSX and Components

• Inline Stylesheet
<h1 style={{color: 'red'}}>Shopping List for {this.props.name}</h1>

• Object Stylesheet
const heading = {
color: 'red',
textAlign: 'center'
}

<h1 style={heading}>Shopping List for {this.props.name}</h1>

14
3. JSX and Components

• External Stylesheet
Create style.css file then add following css code
.heading{
color: red;
text-align: center;
}

<h1 className='heading'>Shopping List for {this.props.name}</h1>

15
3. JSX and Components

Using Bootstrap
Run: $npm install react-bootstrap bootstrap
Stylesheet

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

16
3. JSX and Components

Using Components
export function Card() {
return (
<Card>
<Card.Header>Featured</Card.Header>
<Card.Body>
<Card.Title>Special title treatment</Card.Title>
<Card.Text>
With supporting text below as a natural lead-in to additional content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
}
17
3. JSX and Components

Exercise ( make it responsive on every devices )

18
 Thank you
Perfect Practice, Does Perfect Thing

19