React: Getting Started

Learn the React way to build rich interactive UIs using both class and function components with React Hooks, and build a game for kids with it.
Course info
Rating
(1863)
Level
Beginner
Updated
Feb 25, 2019
Duration
4h 1m
Table of contents
Description
Course info
Rating
(1863)
Level
Beginner
Updated
Feb 25, 2019
Duration
4h 1m
Description

Building efficient web and mobile interfaces is often challenging and requires the use of imperative logic. React enables you to declaratively describe user interfaces in terms of their state, and it will do the heavy lifting of natively building them for you. In this course, React: Getting Started, you will delve into the fundamental concepts about React and use them to build practical web applications. First, you will see how to design class components and stateful function component, how to one-way flow data and behavior in a component tree, and how to read and update state elements. Then, you will delve into modern JavaScript features used with React like arrow functions, destructuring rest and spread operators, classes, async/await, and more. Next, you will learn some core React tasks like taking input from the user, reading data from an API, managing side effects like timers, and sharing stateful logic with custom hooks. Finally, you will explore how to configure and use a local JavaScript development environment on your machine. When you are finished with this course, you will have the skills and knowledge you need to understand React projects, and start simple React applications from scratch.

About the author
About the author

Samer Buna is a polyglot coder with years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer worked in several industries including real estate, government, education, and publications

More from the author
Node.js: Getting Started
Beginner
3h 29m
Sep 11, 2018
Advanced React.js
Advanced
3h 54m
Jul 21, 2017
Advanced Node.js
Advanced
3h 45m
Feb 16, 2017
More courses by Samer Buna
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone. My name is Samer Buna. I work at jsComplete where we create interactive educational content to help people learn coding. Welcome to this React.js Getting Started course from Pluralsight covering the latest stateful function components with the all new React Hooks. React is a simple and powerful library that is used in many big web and mobile applications today. I personally use React in most of the projects I'm involved in. It helps me be fast and productive. In this course, I cover the new simple way using function components with Hooks and the other more verbose way using class components. This is a fully hands-on course where I'll be building small, practical applications with React. There will be no foo or bar in this course, and I try to avoid contrived examples as much as possible. Learning to code is a practical experience. Try to do and redo the examples I'll present in this course, and try to expand their scope and challenge yourself with every piece of knowledge that you learn. Some of the topics that we will cover in this course include React's design concepts, function and class components and their benefits, JSX and event handlers, working with data and APIs, React Hooks for state and side effects, taking input from the user, communicating between components, React's one-way flow of data, and creating your own local development environment for React. By the end of this course, you should be comfortable working with function and class components in React, manage an application state, and be able to build simple React applications from scratch. This course is a beginner-level course on the React.js library. No previous knowledge about React itself is needed, but you do need to be comfortable with the JavaScript language to get the most out of this course. I hope you'll join me on this journey to learn the basics of the excellent React.js library in this Getting Started course, at Pluralsight.

Modern JavaScript Crash Course
React developers love modern JavaScript and use most of its new features. We'll review these features in this course module, which you can totally skip if you think you're comfortable with the topic. JavaScript is a very different language than it used to be just a few years ago. ECMAScript, which is the official specification that JavaScript conforms to, has improved a lot in the past few years after a rather long period of no updates to the language at all. Today, the ECMAScript technical committee, which is known as TC39, makes yearly releases of ECMAScript, and modern browsers shortly follow by implementing the new features introduced in each year. This has started with ECMAScript 2015, or its other commonly known name ES6. Since then, we've had yearly releases named ES plus the current year. Some of these releases were big, and others were very small, but the language now has a continuous update cycle that drives more innovative features and phases out the famous problems JavaScript had over the years. In this module, we'll go over some of the features that are usually used in React applications. This will not be a complete coverage of all the modern ECMAScript features. If you want to expand on this topic, check out the Complete Introduction to Modern JavaScript in the beginner collection at jsComplete.

The GitHub Cards App
We've seen simple components, we worked with multiple components, and we've seen how and when to use state and props of a component. However, we haven't really worked with any real data yet. We're going to be doing exactly that in this course module, and we'll use the GitHub public REST API for it. We're going to build a simple GitHub profile card component that displays information about lists of GitHub profiles. There's a form here where the user can type in another GitHub handle and use the Add card to add a new profile to the list of displayed profiles. So we will be learning how to take input from the user here and how to use that input to make calls to an API, the GitHub API for this example. And the goal of this app is to get you comfortable working with data objects, but the other thing about this app is that we're going to use React class components in here. While the React team might eventually decide to phase out class components in favor of stateful functions, although no plans for that yet, but class components have been the norm in React for a long time, and many React projects will continue to use them, as a React developer, you're expected to understand and be comfortable with both function and class components. This is going to be the only example we'll write using the class components in this course. After that, the bigger game application will be entirely written with function components and Hooks, and I am certain that you're going to like working with function components a lot more than class ones, but you still need to learn them both.

Setting up a Development Environment
Now that you've learned the basics of the React API, you need to set up a local development environment. You can't just keep using the playground tool. Setting up a development environment is not going to be fun. You need to make many different tools work together. These tools have different APIs, and each tool will need to be configured, and all of these tools have different release cycles, so you might run into problems where versions might not be compatible and won't work together. The whole environment might suddenly stop working after a certain upgrade in the tools, and you'll have to spend some time debugging environment issues. Furthermore, a development environment is different from a production environment, which means what works for you in development might not work in production, so you'll have to set up a production environment locally on your machine as well to test your changes in a simulated environment. And don't forget that you need an official test environment as well. Tracking what needs to be configured for each environment is challenging. We've been rendering React applications to the DOM. That's just one renderer for many. Your React application might need to be server-side rendered as well, and there's also the test renderer, which treats your application a bit differently. These different renderers often need different configurations. Luckily, there are some high-level tools that you can use to escape some of the nightmares of dealing with environments, debugging them, and keeping them up to date. The most popular tool in the React ecosystem is create-react-app. As a beginner, this is a very good first step, so let me show you how to use it.