Previous Lecture Complete and continue  

  Course Overview

  1. Course Overview, Module 1: Baby Steps
  2. Course Overview: Module 2: Component-Based Architecture
  3. Course Overview: Module 3: User Input
  4. Course Overview: Module 4: Advancing Components
  5. Before Moving Forward: Node.js and npm

Okay, let's go over what are we going to learn in this course, in the React Foundations course. We have four modules, module number one, it's called Baby Steps. So first we will see how to implement the very simple, very basic Hello World, that's the starting point of many languages, of many frameworks.

Then, right away we will switch to JSX, we will see why it's good to use JSX, and then from now on we'll be using JSX, but in order to use JSX we need to setup Babel and Webpack. There are other ways to use JSX, but these two tools are the recommended way, so from then on we will be using just Babel and Webpack.

Then we will actually refactor our Hello World application, we will be using JSX, so it's a very good example to see why JSX is better, you will be able to contrast Hello World with and without JSX. Then in module two we will see how a React can allow you to create a component-based architecture. So composing components is the core concept in the foundational concept in the CBA, in the component-based architecture, and in order to customize your component you would need to use variables inside of the JSX, you would also need to use props and states.

Then we'll look at how implement lists, the most recommended approach, and then we will implement the clock project. I'll be demoing you how to build a clock with two faces, one would be a digital, and one analog, so it's a nice small project, we complete module two. Then in module three we will be talking and exploring how to capture user input, because most of the applications, they need user input, that's their main reason for their main existence, so how to do that. So first of all we will define a few component methods and then we will talk how to capture browser events, and we will implement a few controlled components and see how to do that, and also work with references and uncontrolled components. And then we will build a timer which you can use for meditation or for cooking, or for any other activities that require a countdown.

Now module number four, advancing components. So this is a more advanced module, it's optional but it's highly recommended because we will be talking about how to make your codes more scalable in terms of the team size, in terms of the number of UIs. So you can add certain property types and default property values, you can create higher-order components and to reuse code that way. You can also render children and you can implement certain component lifecycle events to optimize your components, and you can also call the backend data in componentDidMount. We'll look at how to do that.

And before we move forward, before you switch to the next module, you would need Node.js, npm, and I also recommend getting NVM, which stands for node version manager. Instead of going to, which you obviously can also do, and select a version there, select an installer, I recommend running this curl, assuming you have cURL on most POSIX and Mac and Unix systems you have cURL in your terminal, so you can just copy that line and execute, that will give you NVM, and then you would use NVM to actually install Node version 6 or higher, and then npm version 3, we must use version 3, we cannot use version 2, okay? So NVM, why I do recommend NVM because let's say you're working on a legacy project or you want to explore some new features in Node.js 18, well with NVM it's very easy to do, just one command, you're gonna switch back and forth very easily. And if you're just using an installer it might seem like an easy way out right now, but believe me, later it might bite you in the tail so just do the proper thing, use NVM or some other node version manager, and in the end you must have those things to work with React, you must have Node, you must have NVM, npm. npm comes with Node, so if you install Node, npm will be there most of the times. So I'll see you in the next module, go ahead and install those tools. If you have them already make sure you have version 6 and version 4 for Node and npm respectively. See you later!