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. 2 SPEAKERS Timotius Kevin L Senior Software Development Engineer Hogiyanto

    Purnama L Principal Software Development Engineer
  2. 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
  3. 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
  4. 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
  5. 7 1. What is React? 2. Why React? 3. React

    vs Vanilla JS 4. Main Concepts 5. Frameworks 6. Setup & Installation 7. Demo Outline
  6. 9 What is React? • JavaScript library for building user

    interfaces • Open-source project by Facebook • View layer in MVC
  7. 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
  8. 14 React vs Vanilla JS? How the UI is first

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

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

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

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

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

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

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

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

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

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

    (Vanilla JS) • grocery.js
  19. 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
  20. 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
  21. 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
  22. 37 Main Concepts Lifecycle class HelloWorld extends React.Component { constructor(props)

    { ... } componentDidMount() { ... } componentDidUpdate(prevProps) { ... } componentWillUnmount() { ... } render() { ... } }
  23. 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.
  24. 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() { ... } }
  25. 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)
  26. 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 /> }
  27. 42 Main Concepts Hooks A Hook is a special function

    that lets you “hook into” React features • useState • useEffect • useCallback • useMemo
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 55 References • React JS • React Tutorial: An Overview

    and Walkthrough • React v/s Vanilla JS - When to use what? • React vs. Plain JavaScript
  34. 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
  35. • 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