ReactJS

1 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Introduction

 ReactJS: a declarative, efficient,

and flexible JavaScript library for
building reusable UI components
 Simplifying the DOM management
and manipulation
 Developed and maintained by
Facebook
 Open source, contributed by the
community
2 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
React Operations

3 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Setup
 Create a React project:
 npx create-react-app <project-name>
 Deploy development web:
 npm start
 Build production web:
 npm run build

4 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Components and DOM
 JSX (JavaScript Extension) language

 Built-in components:
 div, a, p, img,…

 Associate React to a DOM element

 ReactDOM.render(
<App />,
document.getElementById('root')
);

5 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Custom Components
 Custom class components:
 class MyComponent extends React.Component {
render() {
return <div>Hello</div>
}
}

 Custom function components:

 function MyComponent() {
return <div>Hello</div>
}

 Important: Custom component must be Capitalized

6 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Attributes and Text
 As string literals:
 <a className="link" href="…">Open</a>

 As expressions:
 <a className={className} href={targetUrl}>
{title}</a>

7 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Element in Variable
 function SampleComponent() {
const list = <ul className="list">
…
</ul>;

return <div>{list}</div>;
}

8 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Inline Styling
 const myStyle = {
fontSize: 80,
fontFamily: "Courier",
color: "#003300"
}

function MyComponent() {
return <h1 style={myStyle}>Head</h1>
}

9 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Imported Styling
 import "./styles.css";

function MyComponent() {
return <h1 className="header">Head</h1>
}

10 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Properties (Props) in Class Components
 class MyButton extends Component {
render() {
return <button className="my-button">
{this.props.title}
</button>;
}
}

 const form = <div>

<MyButton title="Button 1" />
<MyButton title="Button 2" />
</div>

11 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Properties (Props) in Function Components
 function MyButton(props) {
return <button className="my-button">
{props.title}
</button>;
}

 const form = <div>

<MyButton title="Button 1" />
<MyButton title="Button 2" />
</div>

12 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Composition
 Use normal props and the special children prop to pass children elements
 Example:
 function Layout(props) {
return <div className="page">
<div className="header">{props.header}</div>
<div className="body">{props.children}</div>
<div className="footer">{props.footer}</div>
</div>
}

function App() {
return <Layout
header={<h1>Title</h1>}
footer={<div>Footer</div>}
>
<p>Hello</p>
<p>Content</p>
</Layout>
}

13 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create a page in React showing a blog post and readers’
comments

14 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
States in Class Components
 class Person extends Component {
constructor(props) {
super(props)

this.state = {
name: "John Doe",
age: 20
}
}

render() {
return <div>
{`${this.state.name} is ${this.state.age} years old`}
</div>;
}
}

15 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Updating States
 class Person extends Component {
// ...
setName(newName) {
this.setState({
... this.state,
name: newName
});
}
}

 Immutability is important to detect DOM changes! It’s

incorrect to do:
 this.state.name = newName;

16 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
States in Function Components
 import {useState} from "react";

function Person() {
const [name, setName] = useState("John Doe");
const [age, setAge] = useState(20);

return <div>{`${name} is ${age} years old`}</div>;

}

17 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Make a card that automatically flips up and down every 5
seconds
 Use CSS styling, props, states
 Do it with both class and function components

18 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Event Handling: Class Components
 class MyButton extends Component {
handleClick() {
console.log("Button clicked")
}

render() {
return <button onClick={this.handleClick}>
Hello
</button>
}
}

19 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Binding a Function to an Element
 If a function needs access the parent component, we need to bind it to the
component instance
 Counter-example:
 class MyButton extends Component {
constructor(props) {
super(props)
this.state = { clicked: false }
}

handleClick() {
this.setState({ clicked: true }); // Error
}

render() {
return <button onClick={this.handleClick}>
Hello</button>
}
}
20 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Method 1
 class MyButton extends Component {
constructor(props) {
super(props)
this.state = { clicked: false }
this.handleClick = this.handleClick.bind(this)
}

handleClick() {
this.setState({ clicked: true }); // Fine
}

render() {
return <button onClick={this.handleClick}>
Hello</button>
}
}

21 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Method 2
 class MyButton extends Component {
constructor(props) {
super(props)
this.state = { clicked: false }
}

handleClick() {
this.setState({ clicked: true }); // Fine
}

render() {
return <button onClick=
{this.handleClick.bind(this)}>
Hello</button>
}
}

22 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Method 3
 class MyButton extends Component {
constructor(props) {
super(props)
this.state = { clicked: false }
}

handleClick() {
this.setState({ clicked: true }); // Fine
}

render() {
return <button onClick=
{() => this.handleClick()}>
Hello</button>
}
}
 Methods 2, 3 create a new function each time the component renders, which
may have performance implications ➔ Method 1 is preferred
23 AC3040: Mobile Programming
Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Passing Parameters to an Event Handler
 Sometimes, we want to pass an extra parameter to an
event handler

 Only possible with Methods 2 and 3

 <button onClick={(e) => this.deleteRow(id,
e)}>Delete Row</button>

 <button onClick={this.deleteRow.bind(this,
id)}>Delete Row</button>

24 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Event Handling: Function Components
 function MyButton() {
const [clicked, setClicked] = useState(false)

const handleClick = () => {

setClicked(true)
}

return <button onClick={handleClick}>

Hello
</button>
}

25 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Change the card component to make it flips in response
to mouse click events

26 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Lifting States Up
 When multiple components
rely on the same changing
data, lift the shared states
up to their closest common
ancestor
 Ancestors have access to
their children’s states
 It’s simpler

27 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Example
function MyValue({text}) {
return <span className="text">{text}</span>
}

function MyButton({title, handler}) {

return <button onClick={handler}>{title}</button>
}

function IntPicker() {
const [value, setValue] = useState(10);
return <>
<MyValue text={value} />
<MyButton title="+"
handler={() => setValue(value + 1)} />
<MyButton title="-"
handler={() => setValue(value - 1)} />
</>
}

28 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Exercise
 Create a BMI calculator as in the
figure.
 𝐵𝑀𝐼 = 𝑤/ℎ2 (𝑤 in kg, ℎ in meters)
 < 18.5 : underweight
 18.5 ÷ 25 : normal
 25 ÷ 30 : overweight
 ≥ 30 : obese

29 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology
Homework
1. Write a memory card
matching game
2. Create a simple
calculator as in the figure

30 AC3040: Mobile Programming

Đào Trung Kiên @ MICA Institute & Dept. of Comm. Eng., SEEE, Hanoi Univ. of Science and Technology