$30 off During Our Annual Pro Sale. View Details »

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

    View Slide

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

    View Slide

  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

    View Slide

  4. 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

    View Slide

  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

    View Slide

  6. Themed
    Days
    Sharing
    Hard
    Work
    Continuous
    Learning
    Team
    Building

    View Slide

  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

    View Slide

  8. 8
    What is React?

    View Slide

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

    View Slide

  10. 10
    Why React?

    View Slide

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

    View Slide

  12. 12
    React vs Vanilla JS

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. 26
    Main Concepts

    View Slide

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

    View Slide

  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

    View Slide

  29. 29
    Main Concepts
    JSX

    View Slide

  30. 30
    Main Concepts
    JSX

    View Slide

  31. 31
    Main Concepts
    JSX

    View Slide

  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

    View Slide

  33. 33
    Main Concepts
    Components and Props
    ● Defining a
    component

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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() { ... }
    }

    View Slide

  40. 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)

    View Slide

  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
    }

    View Slide

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

    View Slide

  43. 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

    View Slide

  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 (
    setCount(count + 1)}>
    Clicked {count} times

    )
    }
    ● useEffect
    wrap a function
    that contains
    imperative,
    possibly effectful
    code

    View Slide

  45. 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

    View Slide

  46. 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

    View Slide

  47. 47
    Frameworks

    View Slide

  48. 48
    Frameworks
    create-react-app Gatsby
    NextJS

    View Slide

  49. 49
    Setup & Installation

    View Slide

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

    View Slide

  51. 51
    Setup & Installation
    Static HTML File

    View Slide

  52. 52
    Setup & Installation
    Static HTML File

    View Slide

  53. 53
    Demo

    View Slide

  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

    View Slide

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

    View Slide

  56. 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

    View Slide

  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

    View Slide

  58. 58
    How To Prepare
    Learn from Tech Companies
    https://linktr.ee/gdplabs

    View Slide

  59. Thank you
    Any Questions?
    59

    View Slide