Learning Path: High-Performance React With Redux

Learning React Reusable Components 27 lectures 03:44:33 Overview and Setting Things Before we can start building our React components, we need to set up and configure out environment. Let's do just that in this video.

• Set up npm and node.js
• Integrate webpack to understand what it is
• Get webpack running

Configuring the Webpack Development Server In this video, you will learn the basics of setting up the webpack development server.

• Continue configuration with webpack
• Include the webpack development server
• Enable hot refreshing

Developing in ES2016 Today with Babel For the remainder of our course, we will be developing and exploring ES2016. For us to gain access to it, we will configure Babel 6 into our webpack. Once we set things up, we can develop freely in ES6 as it will automatically be transcribed into ES5. In this video, you will learn a few new ES6 Features as well—default function variables and template strings.

• Enable ES6 to run on our server
• Work with npm, webpack, and Babel to run ES6

Hello JSX JSX enables us to easily integrate XML style coding into our programming. In this video, we will configure Babel with webpack to enable us to code in JSX directly in our code. We will take a peek into the basics of JSX as well as use React for the first time.

• Install JSX support in Babel
• Take a look at the basics of JSX

Creating a Component In this video, we will create our first React component class using the new ES6 features.

• Build an ES6 class
• Build a component using JSX

Using Components Inside Components At the heart of React is the capability to reuse components. To do that, we need to extract common component behaviors into separate classes. In this case, we will be extracting a portfolio item and using it to create items.

• Understand what components are
• Learn how to create and use components
• Explore ES6

Passing Properties to Components React JSX components accept properties just like regular HTML properties do (limited to reserved JavaScript keywords such as class). In this video, you will learn how to work with React component properties to create dynamic component output.

• Get introduced to properties and states
• Use JSX properties and understand how they work
• Understand what a property is

Dynamically Passing Components into Components Things are getting dynamic but not enough for it to be useful in a really world dynamic component. For us to take advantage of the React dynamic nature, we need to extract data and send it in dynamically into our component. That's exactly what we will do in this video as we explore object deconstructing, importing, and exporting in ES6.

• Understand how components can have children
• Learn importing and exporting classes in ES6
• Learn object destructuring in ES6

Components That Change with State So far, every single component we created would never change once it was created, but that is about to change (pun indented). In this video, you will learn how to create a constructor in ES6, integrate callbacks into our component, and bind their callback functions to our object using the bind method.

• Know the difference between properties and states
• Learn how to announce states
• Know how to use states in React

How React Works and Arrow Functions In this last video of this section, we will walk through all the things we did to our components throughout this section as we explore the way arrow functions work.

• Know the main benefits of React
• Understand what the virtual DOM is
• Learn how to work with arrow functions

Sectioning our Site into components Now that we know how to create components, it's time for us to focus on building our sections in our site.

• Segregate the three sections of our site into three components

Composition Instead of Inheritance Now that we extracted all of our section components, it's clear that all of our sections share a lot of commonalities. Usually, in JavaScript we would create an inheritance from where each component would inherent, but a better way is to use composition as it's more visually clear and enables us to mix multiple classes to help us compose the unique features of each component instead of overriding them (much harder to visualize).

• Understand why to use composition instead of inheritance
• Update sections in our application
• Use composition in React

Dynamic Children from Model Data In this video, we will shift our attention to model data and how we can use it to render our components using React.

• Create dynamic children in your components
• Explore the for-of loop in ES6

Understanding var, let, and const Let's take a break from talking about components to introduce const and let, and understand how they work in relation to exporting data from modules.

• Work with the var function scope
• Understand the working of the let and const scopes
• See var, let, and const in action

Exploring ES6 Strings Although not that many things changed in strings (compared to string templates) in ES6, in this video, we explore them as we create the header component.

• Edit our header file
• Know what's new in ES6 strings
• Watch the changes live in action

Finding Bugs Debugging is probably the most important aspect of web development even when it comes to building React applications. In this video, in the process of creating our JSX we will be on the hunt for bugs and show you how to deal with JSX errors.

• Validate your JSX
• Understand error handling in React

Extracting the Model from the View One of the best ways to plan out your application is to reverse engineer it the way we were doing in the previous few videos. In this video, we continue planning out the data structure of our component as we extract our model from the view.

• Understand MVC in terms of React
• Extract the model from the view

Using the JSX and ES6 Spread Features One of the new cool features available in JSX and ES6 is their spread feature—really great stuff. In this video, you will learn how to work with them in ES6 and JSX to speed up our application development.

• Know what spread is
• Learn how to use spread in JSX
• Learn how to use spread in ES6

Validating Development Props To make reusable components it's important for us to give valuable feedback to the users of the component. We will see how to do that in this video.

• Validate the data types that are being sent into our React component
• Understand how to validate data in the development mode
• See how React can be used to give feedback to developers without breaking things for real-world users

Making Everything Dynamic For a component to be reusable, it can't have content that is baked into it as that would force developers to go into the component and change things around. Instead, we want to separate and make things as dynamic as we can.

• Reverse engineer the footer of our site to be dynamic
• Make your code more reusable

Final Thoughts on Reusability There are a few more things we wanted to cover when it comes to reusability and this video is dedicated for that.

• Explore the default values
• Know about validation of single child components
• Know about the importance of validation in general and combine that with our default values

Preparing for Idiomatic JavaScript React is a perfect language for creating agnostic JavaScript that doesn't know whether it's rendering on the client or the server. To facilitate this thought process, we are going to revisit our client JavaScript file and extract anything that isn't directly related to the client out of it. While we won't go all the way to implement our code on different environments, the setup we are doing will make our JavaScript more reusable in different environments.

• Prepare the environment to be Idiomatic
• Make your JavaScript more reusable

Building Out the Site Navigation It's time to create our navigation, the last major component we need for our site to operate. In this video, we will implement our navigation component as we practice many of the things we learnt throughout this title.

• Chalk out a plan to figure out how our navigation should work
• Create the first navigation element

Bubbling Events in React React doesn't like the idea of bubbling events, instead, it prefers that you manually send them around. In this video, we will show you how that is done and implement it on our navigation to update our application that something has changed.

• Know about event bubbling
• Explore event bubbling with the use of properties and callbacks

Merging Our Model with Our View So far, we created a strict separation between our model and our view, but for our application to be completely dynamic we need to, at some point, have our view and model meet. We decided to do that inside our client file enabling us to control which view will go together with which model in a client view.

• Create the business logic area
• Feed the data and views that are to be used into the component

Making Things Dynamic with Maps ES6 introduces maps, and as we are getting close to the end of this title I figured we should use them at least once. Our footer is lost; it's time to bring it back. In this video, we will have a map to the rescue, to reintroduce our footer into our application.

• Get up and close with the Map API
• Use Map API for data structuring and SPA set up

SPA – Creating a Single Page Application With the help of the new Map API, we will make our menu even more dynamic. By the end of this video, our data will dynamically create a menu.

• Make our menu dynamic using location.hash
• Connect all the things we learned throughout the title to create the single page application

Learning React Reusable Components. 27 lectures 03:44:33 Overview and Setting Things Before we can start building our React components, we need to set up and configure out environment. Let's do just that in this video.

• Set up npm and node.js
• Integrate webpack to understand what it is
• Get webpack running

Configuring the Webpack Development Server In this video, you will learn the basics of setting up the webpack development server.

• Continue configuration with webpack
• Include the webpack development server
• Enable hot refreshing

Developing in ES2016 Today with Babel For the remainder of our course, we will be developing and exploring ES2016. For us to gain access to it, we will configure Babel 6 into our webpack. Once we set things up, we can develop freely in ES6 as it will automatically be transcribed into ES5. In this video, you will learn a few new ES6 Features as well—default function variables and template strings.

• Enable ES6 to run on our server
• Work with npm, webpack, and Babel to run ES6

Hello JSX JSX enables us to easily integrate XML style coding into our programming. In this video, we will configure Babel with webpack to enable us to code in JSX directly in our code. We will take a peek into the basics of JSX as well as use React for the first time.

• Install JSX support in Babel
• Take a look at the basics of JSX

Creating a Component In this video, we will create our first React component class using the new ES6 features.

• Build an ES6 class
• Build a component using JSX

Using Components Inside Components At the heart of React is the capability to reuse components. To do that, we need to extract common component behaviors into separate classes. In this case, we will be extracting a portfolio item and using it to create items.

• Understand what components are
• Learn how to create and use components
• Explore ES6

Passing Properties to Components React JSX components accept properties just like regular HTML properties do (limited to reserved JavaScript keywords such as class). In this video, you will learn how to work with React component properties to create dynamic component output.

• Get introduced to properties and states
• Use JSX properties and understand how they work
• Understand what a property is

Dynamically Passing Components into Components Things are getting dynamic but not enough for it to be useful in a really world dynamic component. For us to take advantage of the React dynamic nature, we need to extract data and send it in dynamically into our component. That's exactly what we will do in this video as we explore object deconstructing, importing, and exporting in ES6.

• Understand how components can have children
• Learn importing and exporting classes in ES6
• Learn object destructuring in ES6

Components That Change with State So far, every single component we created would never change once it was created, but that is about to change (pun indented). In this video, you will learn how to create a constructor in ES6, integrate callbacks into our component, and bind their callback functions to our object using the bind method.

• Know the difference between properties and states
• Learn how to announce states
• Know how to use states in React

How React Works and Arrow Functions In this last video of this section, we will walk through all the things we did to our components throughout this section as we explore the way arrow functions work.

• Know the main benefits of React
• Understand what the virtual DOM is
• Learn how to work with arrow functions

Sectioning our Site into components Now that we know how to create components, it's time for us to focus on building our sections in our site.

• Segregate the three sections of our site into three components

Composition Instead of Inheritance Now that we extracted all of our section components, it's clear that all of our sections share a lot of commonalities. Usually, in JavaScript we would create an inheritance from where each component would inherent, but a better way is to use composition as it's more visually clear and enables us to mix multiple classes to help us compose the unique features of each component instead of overriding them (much harder to visualize).

• Understand why to use composition instead of inheritance
• Update sections in our application
• Use composition in React

Dynamic Children from Model Data In this video, we will shift our attention to model data and how we can use it to render our components using React , webpack, and Babel to run ES6 For the remainder of our course, we will be developing and...