ReactJS
A JavaScript library for building user interfaces

Why ReactJS was developed ?

• Existing ones are heavy-weight Frameworks

• Need for a light-weight library

• Complexity of 2-way data binding

• Update to Real DOM is performance intensive

• Bad UX from using “cascading updates” of DOM tree

What is ReactJS?

• Developed by Facebook.
• ReactJS is an open-source JavaScript library which is used for building

user interfaces specifically for single page applications.

• React is a view layer library, not a framework like Backbone,
Angular, etc.
• You can’t use React to build a fully-functional web app.

• Documentation at reactjs.org

Who uses React ?

How does React tackle challenges ?
• Uses 1-way data binding (not 2-way like Angular)

• Virtual DOM ( Efficient for frequent updates )

• Easy to understand what a component will render

• JSX – Easy to mix HTML and JS

• React dev tools and excellent community

• Server-side rendering (useful for SEO)
Copyright © 2019-2021 Marco Papa, K. Sagar, P. Tawalare 5

Core Tenets of React

• Introducing JSX

• Components

• States and Props

• Lifecycle

Introduction to JSX
• JSX (JavaScript XML) is a syntax extension to JavaScript.

const element =

Hello, world!

;

• You can embed any JavaScript expression in JSX by
wrapping it in curly braces.
function formatName(user) {
return user.firstName + ‘ ‘ + user.lastName;

}

const element = (

Hello, {formatName(user)}!

);

• JSX represents objects. Like XML, JSX tags have tag names, attributes and
children.

• Fundamentally, JSX just provides syntactic sugar for the
React.createElement(component, props, …children) function.

Click Me

compiles into:

React.createElement(
MyButton,
{color: ‘blue’, shadowSize: 2},
‘Click Me’

)

Introduction to JSX

Learning Component way at reactjs.org!

ContainerComponent

ButtonComponent

SearchComponent

What are Components ?
• Components are building blocks of React Application

• Components let you split the UI into independent, reusable pieces, and think

about each piece in isolation.

A component
is a

Function /
Class

That produces
HTML to

render
And handles
user events

Using
JSX

Using Event Handlers
and callbacks

Two types of components

Functional / Stateless Components
• These are simple components that do not maintain their own state.
• Conceptually, components are like JavaScript functions. They accept arbitrary

inputs (called “props”) and return React elements describing what should
appear on the screen

Props
• The method to pass a data from parent component to child component.

Class / Stateful Components
• Class components are ECMAScript 6 (ES6) classes that can maintain a state,

independent existence and a lifecycle of its own.

State
• State is a JavaScript Object containing the component data.

• It represents internal state of the component

• Accessed via this.state

• State must be initialized when component is created

• State can only be updated using setState() method

• setState() can only add or change the properties and never remove a property.

• When a component’s state data changes, the rendered markup will be updated by re-invoking
render() method of the class.

State vs Props
• State is referred to the local state of the component which cannot be

accessed and modified outside of the component and can only be used &
modified inside the component.

• Props, on the other hand, make components reusable by giving
components the ability to receive data from the parent component in the
form of props.

STATE PROPS

Internal data External data

Can be changed inside component Cannot be changed

Cannot be changed by parent component Can be changed by parent component

Component Lifecycle

Samples at reactjs.org
• See:

– A Simple Component

– A Stateful Component

– An Application

– A Component Using External Plugins

React-Bootstrap
Bootstrap Front-end framework Rebuilt for React

https://react-bootstrap.github.io/

React-Bootstrap

• Replaces the Bootstrap JavaScript.
• Each component has been built from scratch as a true React

Component.
• No unneeded dependencies like jQuery because methods and events

using jQuery are done imperatively by directly manipulating the
DOM. In contrast, React uses updates to the state to update the
virtual DOM.

Installation

• Recommended installation via the npm package.

• Doesn’t ship with any included CSS. However, a Bootstrap
stylesheet is required to use these components.

Installation

• CDN can also be used to import the Bootstrap CSS file.

Importing

• Import individual components like react-bootstrap/Button
rather than the entire library to reduce the amount of code
you end up sending to the client.

A Vanilla Bootstrap Component

A React-Bootstrap Component

React-Bootstrap Components

• See:
https://react-bootstrap.github.io/components/alerts

• Lots of components!

React-Bootstrap with state

• State can be passed within React-Bootstrap components as a
prop.

• This makes it easier to manage the state as updates are
made using React’s state instead of directly manipulating
the state of the DOM.

React-Bootstrap Examples

• The following Code Sandbox examples show basic usage of
React Bootstrap Components such as Jumbotron, Toast,
Container, Button

• Without Bootstrap cdn for css-
https://codesandbox.io/s/github/react-bootstrap/code-
sandbox-examples/tree/master/basic

• With Bootstrap cdn-https://codesandbox.io/s/github/react-
bootstrap/code-sandbox-examples/tree/master/basic-cdn

Related URLs

• React Bootstrap: https://react-bootstrap.github.io/
• React Bootstrap Components: https://react-

bootstrap.github.io/components/alerts
• Code Sandbox Examples: https://github.com/react-

bootstrap/code-sandbox-examples

https://react-bootstrap.github.io/
https://react-bootstrap.github.io/components/alerts
https://github.com/react-bootstrap/code-sandbox-examples

React Native
A framework for building native apps with React.

React Native

• Build native mobile apps using JavaScript and React

https://reactnative.dev/

React JS

React Native – Overview

Your app

React Native JS
Library

JavaScript Engine

React Native Library

Native App• An embedded instance of
JavaScriptCore.

• React components with
bindings to Native UI
components.

• Manipulating calls into
Objective C & java for
behavior.

• And polyfills for some web
APIs.

React vs React Native

• React (a.k.a. ReactJS or React.js) is is a JavaScript
library you use for building dynamic, high performing,
responsive UI for your web interfaces.

• React Native is an entire platform allowing you to build
native, cross-platform mobile apps.

• React.js is the heart of React Native, and it embodies all
React’s principles and syntax, so the learning curve is easy.

React Native – Components

• React Native provides a number of built-in components.

Basic
Components

View

Text

Image

TextInput

ScrollView

IOS
Components

DatePicker

ImagePicker

ActionSheet

ProgressView

TabBar

Android
Components

BackHandler

ProgressBar

TimePicker

Toast

Toolbar

React Native – Stylesheets

• React Native implements a strict subset of CSS.

• Here’s an example of how stylesheets are created in React
Native:

var styles = StyleSheet.create({
container: {

flex: 1,
marginTop: 30

}
});

…

• Then, that style is applied using inline syntax:

React Native – Installation

• The easiest way is to use GitHub’s Create React Native App:

https://github.com/expo/create-react-native-app

• Make sure you have Node v6 or later. No Xcode or Android
Studio installation required. Use ‘npm’:
npx create-react-native-app

• Then run the following commands to create and run a
new React Native project:

create-react-native-app MyApp
cd MyApp
yarn web (Build the web app)

yarn ios (Build the iOS app)
yarn android (Build the android app)

React Native – Modify and Run your app

• The “npm start” starts a development server for you and
print a QR code in your terminal.

• Install the Expo Client app on your iOS or Android phone
and connect to the same wireless network as your
computer. Using the Expo Client app, scan the QR code
from your terminal to open your project. See:

https://expo.io/

• Open App.js in your text editor of choice and edit some
lines. The application should reload automatically once
you save your changes.

React Native – Hello World

See: https://snack.expo.io Try Device Preview

React Native – Hello World (cont’d)

iOS Android

React Native – A calculator example

• Put styles into a style.js

render() {
return (

)
}

• https://kylewbanks.com/blog/react-native-tutorial-part-2-designing-a-calculator

• Laying out the Calculator

import Style from ‘./Style’;
…

React Native – A calculator example (cont’d)

• Adding the Input Buttons: creating an InputButton class that will be used for
displaying each button on the calculator

// InputButton.js

import React, { Component } from ‘react’;
import {

View,
Text

} from ‘react-native’;

import Style from ‘./Style’;

export default class InputButton extends Component {

render() {
return (

{this.props.value}

)

}

React Native – A calculator example (cont’d)

• Adding the Input Buttons in the calculator class
// App.js
…
import InputButton from ‘./InputButton’;
// Define the input buttons that will be displayed in the calculator.
const inputButtons = [

[7, 8, 9],
[4, 5, 6],
[1, 2, 3],
[‘+’ , 0, ‘=’,] ,
[“Show History”]

];

class ReactCalculator extends Component {
render() {
return (

{this._renderInputButtons()}

)

}
}

React Native – A calculator example (cont’d)

• Adding the Input Buttons in the calculator class
/**

* For each row in `inputButtons`, create a row View and add
create an InputButton for each input in the row.
*/
_renderInputButtons() {

let views = [];

for (var r = 0; r < inputButtons.length; r ++) { let row = inputButtons[r]; let inputRow = []; for (var i = 0; i < row.length; i ++) { let input = row[i]; inputRow.push(

);
}

views.push({inputRow})

}

return views;
}

React Native – A calculator example (cont’d)

• Handling Touch Events: Firstly, update the InputButton to use
a Touchable view instead of the View it currently uses

// InputButton.js
…

render() {
return (

{this.props.value}

)

}

…

You should also notice that we pass on the onPress prop to the TouchableHighlight view, so
we’ll need to provide that from our presenting Component:

React Native – A calculator example (cont’d)

• Handling Touch Events: Update the calculator class which uses the input
buttons

// App.js Calculator class
…

_renderInputButtons() {
…

inputRow.push(

);

}

_onInputButtonPressed(input) {
//handle press button events here

}

…

React Native – A calculator example (cont’d)

// App.js
…
class ReactCalculator extends Component {

constructor(props) {
super(props);

this.state = {
inputValue: 0

}

• Using State: State allows us to update the UI of our applications based on dynamic
data.

• The first thing we’ll use State for is to update the display based on the numbers
entered by the user

React Native – A calculator example (cont’d)

// App.js
…

render() {
return (

{this.state.inputValue}

{this._renderInputButtons()}

)

}

Running the app, you should see that zero is displayed in Text view. That’s
because we set the value to this.state.inputValue, which we initialized to zero
during the constructor.

React Native – A calculator example (cont’d)

• More things to do regarding the state:

– Modify the inputValue in the button pressed events handler

– Add more states to save intermediate results and used as status indicators

– Saving calculation histories

React Native – A calculator example (cont’d)

• Now we have a home screen to display the calculator, and we need to add another
screen to show calculation history

• Using FlatList to display a list of results (like a UITableView in IOS)

class HistoryScreen extends React.Component {

render() {
return (

{item.key}}

);
}

}

React Native – A calculator example (cont’d)

• React Navigation: Navigation between the Home Screen (Calculator) and the
History Screen

• Install React Navigation in your project

• Then you can quickly create an app with a home screen and a history screen:

npm install –save react-navigation

import {
StackNavigator,

} from ‘react-navigation’;

const App = StackNavigator({
Home: { screen: HomeScreen },
History: { screen: HistoryScreen },

});

React Native – A calculator example (cont’d)

• The Final Stretch: pass history data from calculator screen to history screen

//Calculator Screen
…

_handleShowHistoryButtonPressed() {
this.props.navigation.navigate(‘History’, {history: equations});
}

…

//History Screen
…

Render() {
const { params } = this.props.navigation.state;
const historyData = params ? params.history : [];

}

…

React Native – A calculator example (cont’d)

• Demo: Run the React Calculator in the IOS emulator

References

• React JS – Get Started https://reactjs.org/docs/hello-world.html

• Tutorial: Intro To React https://reactjs.org/tutorial/tutorial.html

• Free & Paid Courses for React JS

https://reactjs.org/community/courses.html

• More Project Examples of React JS

https://reactjs.org/community/examples.html

• React Native – Get Started https://facebook.github.io/react-

native/docs/getting-started.html

https://reactjs.org/docs/hello-world.html
https://reactjs.org/tutorial/tutorial.html
https://reactjs.org/community/courses.html
https://reactjs.org/community/examples.html
https://facebook.github.io/react-native/docs/getting-started.html

Next-Generation JavaScript features

• let and const
• Arrow Functions
• Exports and Imports
• Spread and Rest Operators
• Destructuring

React Apps are typically built with latest version of JavaScript, ECMAScript 6
(ES6).
Using Next Generation features allows us to write clean and more robust code.

1. let & const replacing ‘var’

let
• “Let is the new var”
• let allows you to declare variables that are limited to a scope of a block statement, or

expression on which it is used, unlike the var keyword, which defines a variable
globally, or locally to an entire function regardless of block scope.

function varTest() {

var x = 1;

{

var x = 2; // same variable!

console.log(x); // 2

}

console.log(x); // 2

}

function letTest() {

let x = 1;

{

let x = 2; // different variable

console.log(x); // 2

}

console.log(x); // 1

}

• The other difference between var and let is that the latter is initialized to value only
when parser evaluates it. E.g.

function do_something() {
console.log(bar); // undefined
console.log(foo); // ReferenceError
var bar = 1;
let foo = 2;

}

More Info : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

let (cont’d)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

const

• The const declaration creates a read-only reference to a value. It does not mean
the value it holds is immutable, just that the variable identifier cannot be
reassigned. For instance, in the case where the content is an object, this means
the object’s contents (e.g., its properties) can be altered.

• More Info:
https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Statements/const

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

// NOTE: Constants can be declared with uppercase or lowercase, but a common
// convention is to use all-uppercase letters.
// define MY_FAV as a constant and give it the value 7
const MY_FAV = 7;

// this will throw an error – Uncaught TypeError: Assignment to constant variable.
MY_FAV = 20;

// MY_FAV is 7
console.log(‘my favorite number is: ‘ + MY_FAV);

// trying to redeclare a constant throws an error – Uncaught SyntaxError: Identifier ‘MY_FAV’ has already been declared
const MY_FAV = 20;

// the name MY_FAV is reserved for constant above, so this will fail too
var MY_FAV = 20;

// this throws an error too
let MY_FAV = 20;

const (cont’d)

// it’s important to note the nature of block scoping
if (MY_FAV === 7) {

// this is fine and creates a block scoped MY_FAV variable
// (works equally well with let to declare a block scoped non const variable)
let MY_FAV = 20;

// MY_FAV is now 20
console.log(‘my favorite number is ‘ + MY_FAV);

// this gets hoisted into the global context and throws an error
var MY_FAV = 20;

}

// MY_FAV is still 7
console.log(‘my favorite number is ‘ + MY_FAV);

// throws an error – Uncaught SyntaxError: Missing initializer in const declaration
const FOO;

const (cont’d)

// const also works on objects
const MY_OBJECT = {‘key’: ‘value’};

// Attempting to overwrite the object throws an error – Uncaught TypeError: Assignment to constant variable.
MY_OBJECT = {‘OTHER_KEY’: ‘value’};

// However, object keys are not protected,
// so the following statement is executed without problem
MY_OBJECT.key = ‘otherValue’; // Use Object.freeze() to make object immutable

// The same applies to arrays
const MY_ARRAY = [];

// It’s possible to push items into the array
MY_ARRAY.push(‘A’); // [“A”]
// However, assigning a new array to the variable throws an error – Uncaught TypeError: Assignment to constant variable.
MY_ARRAY = [‘B’];

const (cont’d)

2. ES6 Arrow Functions

• An arrow function expression is a syntactically compact alternative to
a regular function expression. Modeled after PHP arrow functions.

• Besides a shorter syntax, they offer advantages when it comes to keeping the
scope of the ‘this’ keyword.

function regularFunc(arg1,arg2){

console.log(arg)
}

function regularFunc (num) {

return num*2;

}

const arrowFunc = (arg1,arg2) => {

console.log(arg);

}

const arrowFunc = arg => { console.log(arg);

}

const arrowFunc = () => {..}

const arrowFunc = num => num*2

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

3. Exports and Imports (modules)

• In React projects (and actually in all modern JavaScript projects), you split your
code across multiple JavaScript files, so-called modules. You do this to keep
each file/ module focused and manageable.

• To access functionality in another file, you need export (to make it available)
and import (to get access) statements.

• You have two different types of exports: default (unnamed) and named
exports.

• A file can only contain one default and an unlimited amount of named
exports.

const person = {

}

export default person;

export const clean = () =>{

}

export const baseData = 10;

person.js util.js

app.js

import person from ‘./person.js’;

import prs from ‘./person.js’;

import {baseData} from ‘./util.js’;

import {clean as cln} from ‘./util.js’;

import * as bundled from ‘util.js’;

Default export

Named export

4. Spread and Rest operators
. . .

Spread operator (…)
• Used to split up array elements OR object properties .
• The spread operator is extremely useful for cloning arrays and objects. Since both are reference types (and

not primitives), copying them safely (i.e., preventing future mutation of the copied original) can be tricky.
With the spread operator you have an easy way of creating a (shallow!) clone of the object or array.

const oldArray = [1, 2, 3];
const newArray = […oldArray, 4, 5]; // This now is [1, 2, 3, 4, 5];
const oldObject = {

…oldObject,
age: 28

};
newObject would then be
{

}

Rest operator (…)

• Used to merge a list of function arguments into an array.

function sortArgs = ( …args) => {

return args.sort();

}

5. Destructuring

• Destructuring allows you to easily access the values of arrays or objects and
assign them to variables.

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); // prints 1
console.log(b); // prints 2

const myObj = {
name: ‘Himanshu’, age: 26

}
const {name} = myObj;
console.log(name); // prints ‘Himanshu’
console.log(age); // prints undefined

Destructuring is very useful when working with function arguments. Consider this example:

const printName = (personObj) => {
console.log(personObj.name);

}

printName({name: ‘Himanshu’, age: 28}); // prints ‘Himanshu’

Here, we only want to print the name but we pass a complete person object to the function. Of course this is no issue but it forces us to
call personObj.name inside of our function.

We can condense this code with destructuring:
const printName = ({name}) => {

console.log(name);
}
printName({name: ‘Himanshu’, age: 28}); // prints ‘Himanshu’

We get the same result as above but we save some code. By destructuring, we simply pull out the name property and store it in a variable/
argument named name which we then can use in the function body.

Destructuring (cont’d)

Some Important JS Array Functions

A lot of React concepts rely on working with arrays (in immutable ways). Some particularly important ones are
the following :

• map() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
• find() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
• findIndex() => https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
• filter() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
• reduce() => https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
• concat() => https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
• slice() => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
• splice() => https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce?v=b
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat?v=b
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Hello, world!

Hello, {formatName(user)}!

Related Posts