Youtor
React JS Full Course 2024
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=lAFbKzO-fss
Code Repository: https://github.com/stuyy/react-tutori... • Support the Channel: • Become a Member: / @ansonthedev • Become a Patreon: / stuyy • Buy me a Coffee: http://ko-fi.com/anson • Donate on PayPal: https://paypal.me/ansonfoong • Connect with me: • Twitter: / ansonthedev • Discord: / discord • GitHub: http://github.com/stuyy • Twitch: / stuy • 0:00 Intro • 2:30 Why learn React? • 3:01 Prerequisites • 6:56 Setup React with Vite • 8:00 Install NPM Dependencies • 9:10 Project File Overview • 18:58 Intro to Components • 27:10 Creating a Component • 38:35 createElement function • 45:04 Component Props • 52:30 Evaluating Props • 58:28 Type Checking Props • 1:10:40 Children Components • 1:14:28 Fragments • 1:21:00 Styling with CSS SCSS • 1:37:41 Dynamic Rendering Lists/Arrays • 2:05:23 Conditional Rendering • 2:25:00 Handling Events • 2:29:56 Input Field onChange Event • 2:43:05 Form onSubmit Event • 2:51:30 Registering Window Events • 2:54:38 State • 2:59:18 useState Hook • 3:06:25 Binding State to Input Fields • 3:30:00 State with Arrays • 3:52:00 Updating Element in State Array • 4:01:50 Delete Element from State Array • 4:09:31 Add Elements to State Array • 4:20:57 useEffect Hook • 4:30:10 useEffect Dependency Array • 4:40:00 Fetching Data Example • 5:01:12 AbortController • 5:04:00 useEffect Cleanup Function • 5:08:30 POST Request Example • 5:24:05 Creating Custom Hooks • 5:43:38 React Context • 5:50:41 Creating a Context • 5:53:53 Using Context Provider • 5:55:29 Consuming Context • 6:05:43 Using State with Context • 6:12:24 Updating Values in Context • 6:16:17 Custom Data Fetching Hook • 6:41:16 Intro to React Router • 6:43:20 createBrowserRouter • 6:45:40 Setting up Routes • 6:50:40 Nested/Child Routes • 6:52:48 Outlet • 6:56:00 Link Component • 6:59:37 useNavigate Hook • 7:03:08 Navigating Programmatically • 7:05:16 Passing State to Route • 7:14:42 Intro to Unit Testing with Vitest • 7:17:00 Setting up Vitest React Testing Library • 7:17:41 Configuring vite.config.js for testing • 7:19:14 Create setupTests.js file • 7:22:16 Writing our First Test • 7:26:40 Rendering Component Under Test • 7:29:48 Snapshot Testing • 7:36:18 Using Screen to Query Elements • 7:37:25 getByText query • 7:45:00 Understanding getBy vs queryBy queries • 7:53:00 findBy queries • 7:55:52 findByText example • 8:04:38 More examples of Testing • 8:21:00 Using getByRole to query Buttons • 8:26:30 Firing User Events • 8:27:23 Simulating Click Event • 8:34:11 Querying for Input Elements • 8:38:35 getByLabelText example • 8:43:56 Testing Multiple Elements of Same Instances • 8:46:22 Data Test IDs • 8:49:02 getByTestId example • 8:53:30 using within() to search elements inside an HTML Element • 9:15:51 Simulating type event • 9:21:00 Other queries • 9:28:24 Testing Component with Context API • 9:57:40 Using Mock Service Worker to Mock API Requests
#############################
