React Introduction - Speaker Deck

Slide 1

Slide 1 text

1 React Introduction

Slide 2

Slide 2 text

2 SPEAKERS Timotius Kevin L Senior Software Development Engineer Hogiyanto Purnama L Principal Software Development Engineer

Slide 3

Slide 3 text

GDP Labs Statistics as of December 2020 3 PARTNERSHIP 50+ projects 70+ clients 26 partners EXPERTISE 1,000+ years of experience 100+ won programming competition 1,400+ years of programming 21,000+ books read 38,000 weekly reports TECHNOLOGY 60+ SaaS used 150+ technologies used 320,000+ articles read INCUBATE STARTUPS COMPANY - Born Cloud-Native 9 years since founded in 2012 200+ talented employees 5 offices in 5 cities 80% engineers 20+ certified people 1600++ trainings taken

Slide 4

Slide 4 text

DIGITAL PAYROLL & HR INTELLIGENT SYSTEM SIMPLE INTELLIGENT AFFORDABLE 150150 HOTLINE [email protected] EMAIL catapa.com EMPLOYEE ORGANIZATION BPJS KESEHATAN BPJS KETENAGAKERJAAN PPh 21 TERMINATION PAYROLL BASIC Claudia Chatbot REIMBURSEMENT LOAN MANAGEMENT BENEFIT MANAGEMENT TIME MANAGEMENT OVERTIME LEAVE PERMISSION ATTENDANCE MONITORING 4

Slide 5

Slide 5 text

glair.ai 5 Products and Services Consulting Service On demand talents capable of crafting customized solutions Analytics Platform An easy & intelligent way to turn your data into insights Training Center We are what we invest

Slide 6

Slide 6 text

Themed Days Sharing Hard Work Continuous Learning Team Building

Slide 7

Slide 7 text

7 1. What is React? 2. Why React? 3. React vs Vanilla JS 4. Main Concepts 5. Frameworks 6. Setup & Installation 7. Demo Outline

Slide 8

Slide 8 text

8 What is React?

Slide 9

Slide 9 text

9 What is React? ● JavaScript library for building user interfaces ● Open-source project by Facebook ● View layer in MVC

Slide 10

Slide 10 text

10 Why React?

Slide 11

Slide 11 text

11 Why React? ● Virtual DOM ● Component-based ● Declarative

Slide 12

Slide 12 text

12 React vs Vanilla JS

Slide 13

Slide 13 text

13 React vs Vanilla JS? ● How the UI is first created ● How functionality is split up across the app ● How data is stored on the browser ● How the UI is updated

Slide 14

Slide 14 text

14 React vs Vanilla JS? How the UI is first created (Vanilla JS) ● index.html

Slide 15

Slide 15 text

15 React vs Vanilla JS? How the UI is first created (React) ● index.html

Slide 16

Slide 16 text

16 React vs Vanilla JS? How the UI is first created (React) ● index.jsx

Slide 17

Slide 17 text

17 React vs Vanilla JS? How functionality is split up across the app (Vanilla JS) ● index.html

Slide 18

Slide 18 text

18 React vs Vanilla JS? How functionality is split up across the app (Vanilla JS) ● grocery.js

Slide 19

Slide 19 text

19 React vs Vanilla JS? How functionality is split up across the app (React) ● index.jsx

Slide 20

Slide 20 text

20 React vs Vanilla JS? How data is stored on the browser (Vanilla JS) ● index.html

Slide 21

Slide 21 text

21 React vs Vanilla JS? How data is stored on the browser (Vanilla JS) ● grocery.js

Slide 22

Slide 22 text

22 React vs Vanilla JS? How data is stored on the browser (React) ● index.jsx

Slide 23

Slide 23 text

23 React vs Vanilla JS? How the UI is updated (Vanilla JS) ● index.html

Slide 24

Slide 24 text

24 React vs Vanilla JS? How the UI is updated (Vanilla JS) ● grocery.js

Slide 25

Slide 25 text

25 React vs Vanilla JS? How the UI is updated (React) ● index.jsx

Slide 26

Slide 26 text

26 Main Concepts

Slide 27

Slide 27 text

27 Main Concepts ● JSX ● Components and Props ● State and Lifecycle ● Hooks

Slide 28

Slide 28 text

28 Main Concepts JSX Why JSX? ● It's easier to describe what the UI should look like ● Embraces the fact that rendering logic is inherently coupled with other UI logic

Slide 29

Slide 29 text

29 Main Concepts JSX

Slide 30

Slide 30 text

30 Main Concepts JSX

Slide 31

Slide 31 text

31 Main Concepts JSX

Slide 32

Slide 32 text

32 Main Concepts Components and Props Rules: ● Start component names with a capital letter ● Props (properties) are read-only ● All React components must act like pure functions with respect to their props

Slide 33

Slide 33 text

33 Main Concepts Components and Props ● Defining a component

Slide 34

Slide 34 text

34 Main Concepts Components and Props ● Rendering a component

Slide 35

Slide 35 text

35 Main Concepts Lifecycle ● Mounting instance of a component is being created and inserted into the DOM ● Updating changes to props or state ● Unmounting component is being removed from the DOM

Slide 36

Slide 36 text

36 Main Concepts Lifecycle https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

Slide 37

Slide 37 text

37 Main Concepts Lifecycle class HelloWorld extends React.Component { constructor(props) { ... } componentDidMount() { ... } componentDidUpdate(prevProps) { ... } componentWillUnmount() { ... } render() { ... } }

Slide 38

Slide 38 text

38 Main Concepts State Both props and state changes trigger a render update. So when would you use state? When a component needs to keep track of information between renderings, the component itself can create, update, and use state.

Slide 39

Slide 39 text

39 Main Concepts State The state starts with a default value when a Component mounts class Counter extends React.Component { constructor() { super(); this.state = { count: 0 }; } render() { ... } }

Slide 40

Slide 40 text

40 Main Concepts State class Counter extends React.Component { constructor() { ... } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }) } render() { return ( this.updateCount()}> Clicked {this.state.count} times ) } } The state then suffers from mutations in time (mostly generated from user events)

Slide 41

Slide 41 text

41 Main Concepts Hooks Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. function Example(props) { // You can use Hooks here! return

}

Slide 42

Slide 42 text

42 Main Concepts Hooks A Hook is a special function that lets you “hook into” React features ● useState ● useEffect ● useCallback ● useMemo

Slide 43

Slide 43 text

43 Main Concepts Hooks function Counter() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( setCount(count + 1)}> Clicked {count} times ) } ● useState call it inside a function component to add some local state to it

Slide 44

Slide 44 text

44 Main Concepts Hooks function Counter() { // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times` }, [count]) return ( setCount(count + 1)}> Clicked {count} times ) } ● useEffect wrap a function that contains imperative, possibly effectful code

Slide 45

Slide 45 text

45 Main Concepts Hooks function Counter() { const alertCount = useCallback(() => { alert(`You clicked ${count} times`) }, [count]) return ( <> setCount(count + 1)}> Clicked {count} times > ) } ● useCallback returns a memoized callback that only changes if one of the dependencies has changed

Slide 46

Slide 46 text

46 Main Concepts Hooks function Counter() { const memoizedValue = useMemo(() => { // computeExpensiveValue is a function with heavy calculation return computeExpensiveValue(count) }, [count]) return ( <>

Computation result: {memoizedValue}

setCount(count + 1)}> Clicked {count} times > ) } ● useMemo returns a memoized value, it only recomputes when one of the dependencies has changed

Slide 47

Slide 47 text

47 Frameworks

Slide 48

Slide 48 text

48 Frameworks create-react-app Gatsby NextJS

Slide 49

Slide 49 text

49 Setup & Installation

Slide 50

Slide 50 text

50 Setup & Installation ● Static HTML File ● create-react-app

Slide 51

Slide 51 text

51 Setup & Installation Static HTML File

Slide 52

Slide 52 text

52 Setup & Installation Static HTML File

Slide 53

Slide 53 text

53 Demo

Slide 54

Slide 54 text

54 What's Next? ● Typescript ○ Official Documentation ○ React + Typescript Cheatsheets ● Styling ○ material-ui ○ tailwindcss ○ styled-components ● Static Code Analysis ○ eslint ● Testing ○ jest ○ react-testing-library

Slide 55

Slide 55 text

55 References ● React JS ● React Tutorial: An Overview and Walkthrough ● React v/s Vanilla JS - When to use what? ● React vs. Plain JavaScript

Slide 56

Slide 56 text

Professional Developments Practical Experience Applied Best Practices Chance to get full-time offering INTERNSHIP PROGRAM GDP Labs @gdplabs [email protected] APPLY NOW! career.catapa.com/GDPLabs/jobs

Slide 57

Slide 57 text

● Software Development Engineer ● Site Reliability Engineer ● AI Engineer ● Solution Engineer ● CATAPA Business Development ● CATAPA Content Strategist ● GLAIR Account Executive ● Product Marketing ● Windows Server Administrator ● Graphic Designer (UI/UX) ● and many more... JAKARTA • BANDUNG • YOGYAKARTA • SURABAYA • BALI