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:

• Starter: https://jsbin.com/hujekonofa/1/edit?h…
• Finished: https://jsbin.com/gijuhor/edit?html,j…

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