A Practical Start with React

Are you ready to write structured single page applications with one of the most popular JavaScript libraries around? This course uses a hands-on approach to teach you React in under 90 minutes.
Course info
Rating
(97)
Level
Beginner
Updated
Apr 21, 2018
Duration
1h 28m
Table of contents
Description
Course info
Rating
(97)
Level
Beginner
Updated
Apr 21, 2018
Duration
1h 28m
Description

In this course, A Practical Start with React, you will first learn why React is so great. After this module you'll be able to determine if React is for you and/or your team. It will also provide a basic overview of the mechanics of a React app like tree reconciliation and the use of JSX. There's also a brief comparison with alternative libraries and frameworks included. The next module teaches you how to set up a development environment efficiently. You will see create-react-app in action and the setup of Visual Studio Code and Chrome developer tools is covered. Following this, you will cover the structure of an app like the folders that are typically used, the JavaScript entry point and the use of ES2015 modules. You'll also see how the top-level component works and how to place components in folders. Next, you'll touch on components. The difference between function and class components is covered as well as state and props in a component. Also expect explanations on lifecycle methods, error boundaries and ways to compose components. The fifth module is a collection of additional tips to enhance your React experience. Type checking with prop-types is covered as well as separating UI from state, React Router, Flux & Redux and unit testing with Jest. After watching this compact course you are ready to create React apps!

About the author
About the author

Roland is a Microsoft MVP enjoying a constant curiosity around new techniques in software development. His focus is on all things .Net and browser technologies.

More from the author
Building GraphQL APIs with ASP.NET Core
Advanced
1h 22m
Jan 17, 2019
Getting Started with ASP.NET Core SignalR
Beginner
1h 11m
Jun 22, 2018
More courses by Roland Guijt
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone! My name is Roland Guijt, and welcome to my course, A Practical Start with React. I'm an independent software developer and trainer based in the Netherlands. React is one of the top JavaScript libraries out there, but is it for you? In this course, I'll answer this question for you. And if the answer is 'Yes, ' then I'll get you started not by going through tons of slides but by showing you how to build an app. With an investment of just 90 minutes, you'll have enough knowledge to unleash your creativity using React. Some of the major topics that I will cover include Is React for you? , setting up a development environment, the anatomy of a React app, and building and arranging components. Before beginning the course, you should be familiar with JavaScript up until at least the ES 2015 implementation, also known as ES6. For me, React really puts the fun back into programming single page applications. If you view this course, I'm sure you'll get as enthusiastic as I am. So don't delay. Continue with the first module and enjoy your React journey.

Should You React?
After watching this first module, you should be able to know for sure if React is for you or your team or not. I'll first show you the app we're going to build during the course. Next, I'll tell you about what you should know before watching this course. If you're good to go, I'll show you why React is awesome. Working with React is working with components, and I'll show you what that means. And, finally, I'll do a basic comparison between React and the two most popular alternatives--Angular and Vue. But let me show off the app we're building first.

Getting Ready
Getting ready to start developing a React app is the goal of this module. First, I'm making sure you have the latest version of Node and npm. Next, we'll create the starting point for our application with a tool called create-react-app. Then we see how we can deploy the app to production. We're also preparing the editor we're going to use, Visual Studio Code. And we'll install a plugin in Chrome that helps to debug React apps.

Structuring the Application
We're examining the project structure of a React app in this module by scrutinizing the app create-react-app created for us. There are several folders like the public and the src folder. We'll see what's in there. Also, we'll take a closer look at the build output and how a React app is bootstrapped. It's important to grasp the concept of modules, so I'm digging into that. We're also making a start with understanding components by changing the default app a bit. But, first, let's take a look at the basic structure.

Understanding Components
This module is about creating components and arranging them. I'll start off by adding a simple component. You'll learn that there are two kinds of components. Components have props and state. We're looking into that as well. Lifecycle methods enable you to react to a lifecycle change in your component. And last but not least, the emphasis of this module lies on building the different types of components we need for the Globomantics app. Let's create a simple component first.

Augmenting Features and Tooling
You now know the basics needed to create your own React app, but there are still a couple of things to point out. I'm talking about separating component state from UI first. After which, we will take a look at the built-in way to type check props. Routing requires a separate set of components. I'll show you how that works. The context API in React is a great way to share global data. Also, a brief introduction about Flux and Redux to let you determine if this is for you or not. Next, we're looking at ejecting. That means assuming control of the create-react-app build process. Unit testing is supported out of the box with Jest. I will brief you on that. And, finally, the ins and outs of progressive web apps with React. I'm starting off with separating state from UI.