Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Introduction

React Introduction

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

GDP Labs

July 02, 2021
Tweet

More Decks by GDP Labs

Other Decks in Programming

Transcript

  1. 1 React Introduction

  2. 2 SPEAKERS Timotius Kevin L Senior Software Development Engineer Hogiyanto

    Purnama L Principal Software Development Engineer
  3. 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
  4. DIGITAL PAYROLL & HR INTELLIGENT SYSTEM SIMPLE INTELLIGENT AFFORDABLE 150150

    HOTLINE contact@catapa.com 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
  5. 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
  6. Themed Days Sharing Hard Work Continuous Learning Team Building

  7. 7 1. What is React? 2. Why React? 3. React

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

  9. 9 What is React? • JavaScript library for building user

    interfaces • Open-source project by Facebook • View layer in MVC
  10. 10 Why React?

  11. 11 Why React? • Virtual DOM • Component-based • Declarative

  12. 12 React vs Vanilla JS

  13. 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
  14. 14 React vs Vanilla JS? How the UI is first

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

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

    created (React) • index.jsx
  17. 17 React vs Vanilla JS? How functionality is split up

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

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

    across the app (React) • index.jsx
  20. 20 React vs Vanilla JS? How data is stored on

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

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

    the browser (React) • index.jsx
  23. 23 React vs Vanilla JS? How the UI is updated

    (Vanilla JS) • index.html
  24. 24 React vs Vanilla JS? How the UI is updated

    (Vanilla JS) • grocery.js
  25. 25 React vs Vanilla JS? How the UI is updated

    (React) • index.jsx
  26. 26 Main Concepts

  27. 27 Main Concepts • JSX • Components and Props •

    State and Lifecycle • Hooks
  28. 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
  29. 29 Main Concepts JSX

  30. 30 Main Concepts JSX

  31. 31 Main Concepts JSX

  32. 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
  33. 33 Main Concepts Components and Props • Defining a component

  34. 34 Main Concepts Components and Props • Rendering a component

  35. 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
  36. 36 Main Concepts Lifecycle https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

  37. 37 Main Concepts Lifecycle class HelloWorld extends React.Component { constructor(props)

    { ... } componentDidMount() { ... } componentDidUpdate(prevProps) { ... } componentWillUnmount() { ... } render() { ... } }
  38. 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.
  39. 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() { ... } }
  40. 40 Main Concepts State class Counter extends React.Component { constructor()

    { ... } updateCount() { this.setState((prevState, props) => { return { count: prevState.count + 1 } }) } render() { return ( <button onClick={() => this.updateCount()}> Clicked {this.state.count} times </button> ) } } The state then suffers from mutations in time (mostly generated from user events)
  41. 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 <div /> }
  42. 42 Main Concepts Hooks A Hook is a special function

    that lets you “hook into” React features • useState • useEffect • useCallback • useMemo
  43. 43 Main Concepts Hooks function Counter() { // Declare a

    new state variable, which we'll call "count" const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ) } • useState call it inside a function component to add some local state to it
  44. 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 ( <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> ) } • useEffect wrap a function that contains imperative, possibly effectful code
  45. 45 Main Concepts Hooks function Counter() { const alertCount =

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

    useMemo(() => { // computeExpensiveValue is a function with heavy calculation return computeExpensiveValue(count) }, [count]) return ( <> <div>Computation result: {memoizedValue}</div> <button onClick={() => setCount(count + 1)}> Clicked {count} times </button> </> ) } • useMemo returns a memoized value, it only recomputes when one of the dependencies has changed
  47. 47 Frameworks

  48. 48 Frameworks create-react-app Gatsby NextJS

  49. 49 Setup & Installation

  50. 50 Setup & Installation • Static HTML File • create-react-app

  51. 51 Setup & Installation Static HTML File

  52. 52 Setup & Installation Static HTML File

  53. 53 Demo

  54. 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
  55. 55 References • React JS • React Tutorial: An Overview

    and Walkthrough • React v/s Vanilla JS - When to use what? • React vs. Plain JavaScript
  56. Professional Developments Practical Experience Applied Best Practices Chance to get

    full-time offering INTERNSHIP PROGRAM GDP Labs @gdplabs jobs@gdplabs.id APPLY NOW! career.catapa.com/GDPLabs/jobs
  57. • 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
  58. 58 How To Prepare Learn from Tech Companies https://linktr.ee/gdplabs

  59. Thank you Any Questions? 59