Introduction to React

Transcript

1. Sisters in Tech Portfolio Program Introduction to React July 2023 Speaker : Irvi Aini
2. 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
3. 3 • Introduction to Web • Component, Props, and State • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
4. 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/
5. 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
6. 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
7. 7 • Introduction to Web • Component, Props, and State • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
8. 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.
9. RISTEK Fasilkom Universitas Indonesia 2023 | 9 Components and Props ToDoList component ToDoItem Component Reusable Components
10. RISTEK Fasilkom Universitas Indonesia 2023 | 10 Components and Props Codepen: Components, State, and Props
11. 11 • Introduction to Web • Component, Props, and State • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
12. 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
13. RISTEK Fasilkom Universitas Indonesia 2023 | 13 fun1() Insert, execute, pop Synchronous: How Function Execution Stack Works
14. RISTEK Fasilkom Universitas Indonesia 2023 | 14 fun2() Insert, execute, pop Synchronous: How Function Execution Stack Works
15. RISTEK Fasilkom Universitas Indonesia 2023 | 15 fun3() Insert, execute, pop Synchronous: How Function Execution Stack Works
16. 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.
17. RISTEK Fasilkom Universitas Indonesia 2023 | 17 console.log(“main) main() Insert, execute, pop Asynchronous: How Function Callback Queue Works Callback Queue
18. RISTEK Fasilkom Universitas Indonesia 2023 | 18 setTimeout(fun1, 0) main() Insert, execute, pop Callback Queue Asynchronous: How Function Callback Queue Works
19. RISTEK Fasilkom Universitas Indonesia 2023 | 19 fun2() main() Insert, execute, pop fun1() Callback Queue Asynchronous: How Function Callback Queue Works
20. RISTEK Fasilkom Universitas Indonesia 2023 | 20 main() Insert, execute, pop Callback Queue Asynchronous: How Function Callback Queue Works
21. RISTEK Fasilkom Universitas Indonesia 2023 | 21 console.log(“fun2) fun2() main() Insert, execute, pop fun1() Callback Queue Asynchronous: How Function Callback Queue Works
22. RISTEK Fasilkom Universitas Indonesia 2023 | 22 fun1() Insert, execute, pop Callback Queue Asynchronous: How Function Callback Queue Works
23. RISTEK Fasilkom Universitas Indonesia 2023 | 23 console.log(“fun1”) fun1() Insert, execute, pop Callback Queue Asynchronous: How Function Callback Queue Works
24. 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
25. 25 • Introduction to Web • Component, Props, and State • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
26. RISTEK Fasilkom Universitas Indonesia 2023 | 26 How we request data from an API?
27. 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.
28. 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.
29. RISTEK Fasilkom Universitas Indonesia 2023 | 29 Imagine we need to make multiple request to different API then how should we do it?
30. 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
31. RISTEK Fasilkom Universitas Indonesia 2023 | 31 Promise.all vs Multiple Await
32. 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
33. 33 • Introduction to Web • Component, Props, and State • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
34. 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
35. 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.
36. 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.
37. 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
38. 38 • Introduction to Web • Component, Props, and State • Asynchronous and Synchronous in JS • Data Fetching • Routing in NextJS • Testing Internal Class Agenda
39. 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.
40. 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:
41. RISTEK Fasilkom Universitas Indonesia 2023 | 41 Integration Test using Cypress Two pages that we have An example on how to make integration test
44. 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.
45. SLIDE TITLE
46. Slide Title RISTEK Fasilkom Universitas Indonesia 2023 | 46
47. RISTEK Fasilkom Universitas Indonesia 2023 | 47