Learning React Reusable Components
4.0 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
41 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning React Reusable Components to your Wishlist.

Add to Wishlist

Learning React Reusable Components

Understand React’s new componentized development paradigm
4.0 (3 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
41 students enrolled
Created by Packt Publishing
Last updated 8/2017
Current price: $10 Original price: $70 Discount: 86% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the fundamentals of React’s component-based development paradigm
  • Create components using JSXUse Babel to incorporate ES6 features into current browsers
  • Get to know how to pass parameters and change state
  • Find out how to debug a component-based app
  • Build a React component-based SPA
View Curriculum
  • This course takes an extremely hands-on approach to teaching technology, full of practical examples and real-world advice. If you need to really understand component-based React development, then this is the course for you.

This course is the next step for the React full-stack web developer who wants to gain a full understanding of React development. One of the most powerful features of React is that it follows a radically different method of application development. It moves away from the traditional monolithic approach and re-orients developers to creating in a fully componentized manner. This requires a completely different way of thinking that can be unfamiliar to developers trained in the old ways.

This course will help you understand the power behind this new approach and show you how to build componentized apps and sites with reusable functionality. You will learn about the changes in ES6, and how they are important to React development, and how you can use Babel to use those features in current browsers. You will use JSX to create reusable components and learn how to pass parameters between them to create reactive sites. The course also dives into building Single-Page Applications (SPAs) using isomorphic JavaScript for a more dynamic experience.

About The Author

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department, PIIM. He is the owner of the online video training school, and an Adobe ACP. He enjoys spending most of his time learning and teaching and has a love for visual programming and visualization in general. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.

Who is the target audience?
  • This course is for web developers who are familiar with JavaScript and the basics of the React stack.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
27 Lectures
Creating a React JSX Component
5 Lectures 45:57

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. 

Preview 10:56

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

Configuring the Webpack Development Server

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. 

Developing in ES2016 Today with Babel

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. 

Hello JSX

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

Creating a Component
Understanding the React Paradigm Shift
5 Lectures 41:54

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. 

Preview 06:59

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. 

Passing Properties to 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. 

Dynamically Passing Components into Components

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. 

Components That Change with State

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. 

How React Works and Arrow Functions
5 Lectures 35:36

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

Preview 07:25

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). 

Composition Instead of Inheritance

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

Dynamic Children from Model Data

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. 

Understanding var, let, and const

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. 

Exploring ES6 Strings
Reusable Components
6 Lectures 48:49

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. 

Preview 09:48

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. 

Extracting the Model from the View

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. 

Using the JSX and ES6 Spread Features

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. 

Validating Development Props

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. 

Making Everything Dynamic

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

Final Thoughts on Reusability
Building a Single Page Application
6 Lectures 52:04

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. 

Preparing for Idiomatic JavaScript

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. 

Building Out the Site Navigation

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.

Bubbling Events in React

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. 

Merging Our Model with Our View

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. 

Making Things Dynamic with Maps

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. 

SPA – Creating a Single Page Application
About the Instructor
Packt Publishing
3.9 Average rating
8,109 Reviews
58,407 Students
686 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.