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

Building an Awesome Todo List App in React  for Beginners
1 Likes17.05 GEEK