React Introduction

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

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