This is a 2-hour incident course on React & Node JS, for anyone who wants to get started with web & React development. It was originally done as a workshop for the technical team at Jovian.ml. You can track online using the launch code links below.
Code:
TOPIC INDEX
Part 1 - Introduction to React Components
- Initial setup: 00:00
- Hello world with React: 01:33
- JSX and transpilation with Babel: 06:11
- Our first React Component: 08:58
- Passing props to components: 12:41
- Creating multiple components: 15:54
- A reusable Todo component: 20:56
- Rending a list of components dynamically: 25:03
- Styling components in React: 32:44
- Arrow functions and destructuring: 39:37
Part 2 - Building Interactive UIs with Props & State
- Todo input box: 40:48
- Class component & state: 42:42
- Controlled form input: 48:03
- Virtual DOM & re-rendering: 55:42
- Passing state via props: 57:40
- Passing callbacks via props: 1:03:00
- Implementing a fake network request: 1:11:45
- Showing a loading indicator: 1:17:44
- Lifecycle methods (componentDidMount): 1:19:20
- Advanced state manipulation: 1:22:49
- Array.map vs for loops (question): 1:34:09
- Avoiding direct state manipulation (question): 1:36:39
Part 3 - Local Development with Node JS & Create React App
- Introduction to Node JS: 1:37:57
- Exporting and importing functions: 1:40:49
- Organizing code into folders: 1:45:24
- Installing packages with NPM (lodash): 1:49:04
- Using Create React App: 1:52:51
- CRA project structure: 1:57:06
- Local development & bundling (webpack): 1:58:44
- Refactoring the todo list app locally: 2:05:30
- Inline CSS with styled-components: 2:08:00
Prerequisites:
- Basic programming experience (loops & functions)
- Some familiarity with HTML, CSS & Javascript
#react #nodejs #javascript