React

Roshan David Jathanna

[email protected]
Traditional Web Application

html + css + js

2
Single Page Application

3
Comparison

4
Front-end frameworks

https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/ 5
React
▸ JavaScript library for building fast and interactive user interfaces
▸ Developed at Facebook in 2011
▸ Most popular javascript library for building user interfaces

6
React Component
App

Banner Search Videos

Logo Video Video

Header Thumbnail Thumbnail

Title Title

Subtitle Subtitle

Website Like Like

7
React Component
▸ React app is all about components
▹ Piece of the UI (user interface) that has its own logic and
appearance
▹ Isolated development
▹ Isolated testing
▹ Reusable

8
Document Object Model
(DOM)

9
Virtual DOM
▸ Actual DOM
▹ Hard to keep track of changes
▹ Slow to update
▸ React creates Virtual representation of DOM
▸ React will take care of changing actual DOM whenever virtual DOM is modified
▸ Virtual DOM uses
▹ Efficient diffing algorithm
▹ Update subtrees
▹ Batch updates
10
Virtual DOM

11
Hydration

https://www.reddit.com/r/webdev/comments/xqd4i8/what_is_hydration/
12
React Setup
▸ Nodejs
▸ npm install –g create-react-app
▸ VS Code
▹ Simple react snippets – Bruke
▹ Prettier
▹ Emmet
▸ npx create-react-app first
▸ npm start

13
Folder Structure
For the project to build, these files must exist with exact filenames:
▹ public/index.html is the page template
▹ src/index.js is the JavaScript entry point
Put any JS and CSS files inside src, otherwise webpack won’t see them
Only files inside public can be used from public/index.html

14
React ES6 Modules
Default Import Named Import
function message () { function message () {
return 'Hello World'; return 'Hello World';
}; };
export default message; export {message};

import message from "./message.js"; import {message} from "./message.js";

Can be any name Has to be same name as export

15
React
https://react.dev/learn

▸ Creating and nesting components

▸ Writing markup with JSX
▸ Adding styles
▸ Displaying data
▸ Conditional rendering
▸ Rendering lists
▸ Responding to events
▸ Updating the screen

16
Sharing data between
components

17
State
▸ Does it remain unchanged over time? If so, it isn’t state.
▸ Is it passed in from a parent via props? If so, it isn’t state.
▸ Can you compute it based on existing state or props in your component? If so, it
definitely isn’t state!

18
Assignment
Create a simple React application to display a list of favorite movies. The application should
include the following features:
• Create and Nest Components: Create a parent component called MovieApp and a child
component called MovieList.
• Writing Markup with JSX: Use JSX to structure the HTML within the components.
• Adding Styles: Apply some basic CSS styles to the components.
• Displaying Data: Display a list of movies using an array of movie objects. Each movie object
should have a title and a release year.
• Conditional Rendering: Display a message "No movies to display" if the movie list is empty.
• Rendering Lists: Render the list of movies using the map function.
• Responding to Events: Add a button to each movie entry that allows the user to remove the
movie from the list.
• Updating the Screen: Ensure the screen updates automatically when a movie is removed.

19
Keep Components Pure
▸ It minds its own business. It does not change any objects or variables that
existed before it was called.

▸ Same inputs, same output. Given the same inputs, a pure function should
always return the same result.
20
Thinking in React
https://react.dev/learn/thinking-in-react

21
Thinking in React
Start with the mockup

22
Thinking in React
Step 1: Break the UI into a component hierarchy
Same techniques for deciding if you should create a new
function or object.
One such technique is the single responsibility principle,
that is, a component should ideally only do one thing. If it
ends up growing, it should be decomposed into smaller
subcomponents.
1. FilterableProductTable (grey) contains the entire app.
2. SearchBar (blue) receives the user input.
3. ProductTable (lavender) displays and filters the list
according to the user input.
4. ProductCategoryRow (green) displays a heading for
each category.
5. ProductRow (yellow) displays a row for each product.
23
Thinking in React
Step 2: Build a static version in React

24
25
Thinking in React
Step 3: Find the minimal but complete representation of UI state
All Data
1.The original list of products is passed in as props, so it’s not
state.
2.The search text seems to be state since it changes over time
and can’t be computed from anything.
3.The value of the checkbox seems to be state since it changes
over time and can’t be computed from anything.
4.The filtered list of products isn’t state because it can be
computed by taking the original list of products and filtering it
according to the search text and value of the checkbox.

26
Thinking in React
Step 4: Identify where your state should live
React uses one-way data flow, passing data down the
component hierarchy from parent to child component.

For each piece of state in your application:

1.Identify every component that renders something based on that state.
ProductTable, SearchBar
2. Find their closest common parent component—a component above them all in the hierarchy.
FilterableProductTable
3. Decide where the state should live:
1. Often, you can put the state directly into their common parent.
2. You can also put the state into some component above their common parent.
3. If you can’t find a component where it makes sense to own the state, create a new
component solely for holding the state and add it somewhere in the hierarchy above the
common parent component. 27
Thinking in React
Add state to the component with the useState() Hook.

pass filterText and inStockOnly to ProductTable and SearchBar as props:

28
Thinking in React
Step 5: Add inverse data flow

Inside the SearchBar, you will add the

onChange event handlers and set the parent
state from them

29
Resources
▸ https://react.dev/learn

30