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

Introduction to React

Introduction to React

Avatar for Irvi Aini

Irvi Aini

July 24, 2023
Tweet

More Decks by Irvi Aini

Other Decks in Technology

Transcript

  1. RISTEK Fasilkom Universitas Indonesia 2023 | 2 Slide Title Hi,

    I’m Irvi Aini Software Engineer @ Motional Traveloka, Indonesia Software Engineer Previous Spotify, Sweden Software Engineer University of Edinburgh, The United Kingdom Master Student, Data Science Current Motional, Singapore Software Engineer Irvi Aini Software Engineer @ Motional
  2. 3 • Introduction to Web • Component, Props, and State

    • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
  3. RISTEK Fasilkom Universitas Indonesia 2023 | 4 Number of Internet

    Usage Worldwide 2005 - 2022 and Mostly Used Programming Language in 2023 Hannah Ritchie, Edouard Mathieu, Max Roser and Esteban Ortiz-Ospina (2023) - "Internet". Published online at OurWorldInData.org. Retrieved from: 'https://ourworldindata.org/internet' [Online Resource] article, M. K. this. (2023, June 28). Top programming languages that will rule in 2023. Fireart Studio. https://fireart.studio/blog/top-programming-languages-that-will-rule-in-2021/
  4. RISTEK Fasilkom Universitas Indonesia 2023 | 5 Request Response Clients

    Server • Establishing TCP connection • Requesting content • Responding with requested content • Eventually closing the connection DNS IP Address
  5. RISTEK Fasilkom Universitas Indonesia 2023 | 6 HTTP Request Request

    Line Headers Body Method: GET, POST, PUT, DELETE, etc Server HTTP The name of the server, eg: localhost something we requested, eg: /cats URL Content-Type: application/json Cookie: some-cookie {“name”: “a-name”} Scheme Path Method
  6. 7 • Introduction to Web • Component, Props, and State

    • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
  7. RISTEK Fasilkom Universitas Indonesia 2023 | 8 Components and Props

    Components, let you split the UI into independent reusable pieces. This will be a way to ensure a clean code on your codebase. Keep the components small since it’ll be easier to debug, test, and maintain the component. Props or properties are referring to properties of an object, data passing are usually using props. State, built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders. State can be updated through event handler using setState.
  8. RISTEK Fasilkom Universitas Indonesia 2023 | 9 Components and Props

    ToDoList component ToDoItem Component Reusable Components
  9. 11 • Introduction to Web • Component, Props, and State

    • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
  10. RISTEK Fasilkom Universitas Indonesia 2023 | 12 Asynchronous and Synchronous

    Synchronous, we wait for the request to be completed first. Asynchronous, we receive a callback when it has been completed. Example: Promise
  11. RISTEK Fasilkom Universitas Indonesia 2023 | 13 fun1() Insert, execute,

    pop Synchronous: How Function Execution Stack Works
  12. RISTEK Fasilkom Universitas Indonesia 2023 | 14 fun2() Insert, execute,

    pop Synchronous: How Function Execution Stack Works
  13. RISTEK Fasilkom Universitas Indonesia 2023 | 15 fun3() Insert, execute,

    pop Synchronous: How Function Execution Stack Works
  14. RISTEK Fasilkom Universitas Indonesia 2023 | 16 Asynchronous The word

    asynchronous means not occurring at the same time. So how can this happened? Using Callback Queue Works (aka Task Queue) - When a call occurs, park the callback functions in a queue. - Keep executing code as usual in the stack. - The event loop checks if there is a callback function in the queue. - If so, pull the callback function from the queue to the stack and execute. - Continue the loop.
  15. RISTEK Fasilkom Universitas Indonesia 2023 | 17 console.log(“main) main() Insert,

    execute, pop Asynchronous: How Function Callback Queue Works Callback Queue
  16. RISTEK Fasilkom Universitas Indonesia 2023 | 18 setTimeout(fun1, 0) main()

    Insert, execute, pop Callback Queue Asynchronous: How Function Callback Queue Works
  17. RISTEK Fasilkom Universitas Indonesia 2023 | 19 fun2() main() Insert,

    execute, pop fun1() Callback Queue Asynchronous: How Function Callback Queue Works
  18. RISTEK Fasilkom Universitas Indonesia 2023 | 20 main() Insert, execute,

    pop Callback Queue Asynchronous: How Function Callback Queue Works
  19. RISTEK Fasilkom Universitas Indonesia 2023 | 21 console.log(“fun2) fun2() main()

    Insert, execute, pop fun1() Callback Queue Asynchronous: How Function Callback Queue Works
  20. RISTEK Fasilkom Universitas Indonesia 2023 | 22 fun1() Insert, execute,

    pop Callback Queue Asynchronous: How Function Callback Queue Works
  21. RISTEK Fasilkom Universitas Indonesia 2023 | 23 console.log(“fun1”) fun1() Insert,

    execute, pop Callback Queue Asynchronous: How Function Callback Queue Works
  22. RISTEK Fasilkom Universitas Indonesia 2023 | 24 Promise A Promise

    in JavaScript is an object that represents the eventual completion or failure of an asynchronous operation, and its resulting value. A Promise is in one of these states: • pending: initial state, neither fulfilled nor rejected. • fulfilled: meaning that the operation completed successfully. • rejected: meaning that the operation failed. Example of a Promise Handling a Promise
  23. 25 • Introduction to Web • Component, Props, and State

    • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
  24. RISTEK Fasilkom Universitas Indonesia 2023 | 27 Data Fetching using

    Fetch fetch() is a function in JavaScript used to send HTTP requests to a server and receive responses. Fetch API uses two objects - Request, which will be send and next will return a promise. - Response, object holds the data sent by the API. Resolved promise object when the request completes. If the request fails, the promise is rejected.
  25. RISTEK Fasilkom Universitas Indonesia 2023 | 28 Data Fetching using

    Fetch: Extracting Data After getting the Response object, we can't access the data inside it right away. The response object returned by await fetch supports multiple functions for different data formats, which include: • response.json: Returns data as a JSON Object. • response.text: Returns data in raw text. • response.formData: Returns data as FormData. • response.blob: Returns data as a Blob Object. • response.arrayBuffer: Returns data as a Array Buffer Object.
  26. RISTEK Fasilkom Universitas Indonesia 2023 | 29 Imagine we need

    to make multiple request to different API then how should we do it?
  27. RISTEK Fasilkom Universitas Indonesia 2023 | 30 Promise.all vs Multiple

    Await Let’s say we have these function to benchmark Promise.all and multiple await
  28. RISTEK Fasilkom Universitas Indonesia 2023 | 32 Promise.all vs Multiple

    Await • Fail fast, eg ◦ We have two independent async parallel tasks and the first one takes a very long time to resolve but the second is rejected in a very short time, why leave the user to wait for the longer call to finish to receive an error message? • Error handling, eg ◦ Managing error handling for multiple asynchronous tasks running in parallel can be challenging, especially when using several 'await' calls. In a less than ideal situation, you're likely to encounter warnings like 'UnhandledPromiseRejectionWarning' and 'PromiseRejectionHandledWarning', irrespective of your try/catch block placement. This is the primary reason behind the creation of Promise.all, which is designed to effectively handle such scenarios. Codepen: Some example of how Promise All
  29. 33 • Introduction to Web • Component, Props, and State

    • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
  30. RISTEK Fasilkom Universitas Indonesia 2023 | 34 How Routing Works

    Uses the file system to enable routing in the app. It automatically treats every file with the extensions under the pages directory as a route: • .js, • .jsx, • .ts, or • .tsx Eg: ├── pages | ├── index.js | └── profile └── index.js index.js is the home page accessible on http://localhost:3000 profile/index.js is the contact page accessible on http://localhost:3000/profile
  31. RISTEK Fasilkom Universitas Indonesia 2023 | 35 How to Link

    between Pages By default, it will pre-renders every page to make your app fast and user-friendly. It uses the Link component provided by next/link to enable transitions between routes.
  32. RISTEK Fasilkom Universitas Indonesia 2023 | 36 How to Pass

    Route Parameters It allows you to pass route parameters and then get back the data using the useRouter hook or getInitialProps. It gives you access to the router object that contains the params.
  33. RISTEK Fasilkom Universitas Indonesia 2023 | 37 Dynamic Routing It

    enables you to define dynamic routes in your app using the brackets ([param]). Instead of setting a static name on your pages, you can use a dynamic one. ├── pages ├── index.js └── [slug].js
  34. 38 • Introduction to Web • Component, Props, and State

    • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
  35. RISTEK Fasilkom Universitas Indonesia 2023 | 39 Testing Overview •

    Rendering component tree, mostly asserting the output. Unit testing is also the crucial part of a software development process called test-driven development. Libraries are including jest. • End to End test, running the complete application. In practice, the isolation property of unit tests may not be enough for some functions. In this case, one solution is to test how parts of the application work together as a whole. This approach is called integration testing. Some libraries including cypress.
  36. RISTEK Fasilkom Universitas Indonesia 2023 | 40 Unit Test using

    Jest Snapshot: capture unintended changes on your page component Example on how to add a test to check if the <Home /> component successfully renders a heading:
  37. RISTEK Fasilkom Universitas Indonesia 2023 | 41 Integration Test using

    Cypress Two pages that we have An example on how to make integration test
  38. RISTEK Fasilkom Universitas Indonesia 2023 | 44 References 1. ADHIKARY,

    T. (2021, October 5). Synchronous vs asynchronous javascript – call stack, promises, and more. freeCodeCamp.org. https://www.freecodecamp.org/news/synchronous-vs-asynchronous-in-javascript/. 2. MozDevNet. (n.d.). Promise.all() - javascript: MDN. JavaScript | MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objec ts/Promise/all. 3. Optimizing: Testing. Optimizing: Testing | Next.js. (n.d.). https://nextjs.org/docs/pages/building-your-application/optimizing/testing.