From the course: React Foundations by Pearson
React foundations: Introduction - React.js Tutorial
From the course: React Foundations by Pearson
React foundations: Introduction
Hello, and welcome to this course. My name is Andy Orson, and I'll be your instructor for the course. Well, React comes in two flavors. We have ReactJS for creating web user interfaces, and we have React Native for creating native user interfaces for devices like Apple phones and Android phones. we're going to focus on React.js during this course. So the course starts at the beginning and shows how to create React applications from the ground up. There are 12 lessons altogether, which will lead you step-by-step through all the theory that you need to know. I've also included lots of demos for each lesson, so you can see how to implement all the concepts in practice. There are also labs at the end of each lesson for you to have a go for yourself. I've provided full solutions for all the labs, and I'll go through the solution code with you to explain how everything works. Before we get going, I thought it'd be a good idea just to show you where you can get the materials from for the code demos. So you can see here, I've got a GitHub repository, github.com, Andy Olson, React Foundations, and I've got the full path down here. So if you go to this repository, you can download the code, And that's got all the demos plus all the lab code for the entire course. So once you've downloaded it, you're good to go for the entire session. What you'll get is a folder like this, React Dev. And I've got demos that we'll discuss during the lessons. And I've got a separate subfolder for each lesson. So I'll go through each of these subfolders as we go through the course. And then at the end of each lesson, I've got a lab, which you can have a go at, if you like. Each of those labs, it tells you what you need to do, and it tells you where you need to go as well. So if you go into the student folder, this is the starting code for each lab at the end of each lesson. And then the idea is that you have a go at the lab, just to practice what we covered in the lesson. And then at the end, I'll also go through the solutions as well with you in the video. So the solution code is in here. This is the solution code for each lab at the end of each lesson. Let me say a few words about myself. I'm a freelance developer and instructor. I live in Swansea in South Wales, in the UK. I've been working in IT since 1986. I started programming in C and C++, and I've moved into various other languages over the years. I started creating web applications in the late 1990s, when he had to write tons of lines of JavaScript to do everything manually, which was very painful. jQuery came along in the mid-2000s and made life a bit easier, but it was the advent of frameworks like React and Angular that really made the difference. So these days, I use React for all my web user interfaces, and I love it. It's so elegant and straightforward. So I think it's time for us to get started. Let's go.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
(Locked)
Learning objectives37s
-
(Locked)
Overview of React5m 53s
-
(Locked)
Creating a simple React application9m 32s
-
(Locked)
Using a script map to organize imports5m 30s
-
(Locked)
Understanding the virtual DOM9m 56s
-
(Locked)
Creating a more ambitious user interface9m 36s
-
(Locked)
Creating a data-driven user interface9m 43s
-
(Locked)
Lab: getting started with React10m 44s
-
(Locked)
Lab solution: Getting started with React4m 32s
-
(Locked)
-
-
(Locked)
Learning objectives48s
-
(Locked)
The need for components3m 41s
-
(Locked)
Defining and using a class-based component9m 49s
-
(Locked)
Creating a more ambitious user interface7m 43s
-
(Locked)
Passing properties to a class-based component10m 12s
-
(Locked)
Lab: creating class-based components13m 43s
-
(Locked)
Lab solution: Creating class-based components20m 41s
-
(Locked)
-
-
(Locked)
Learning objectives1m 26s
-
(Locked)
Introduction to functional components4m 53s
-
(Locked)
Defining simple functional components6m 59s
-
(Locked)
Creating a more ambitious user interface3m 27s
-
(Locked)
Passing properties to a functional component8m 30s
-
(Locked)
Destructuring properties10m 3s
-
(Locked)
Lab: creating functional components7m 49s
-
(Locked)
Lab solution: Creating functional components7m 39s
-
(Locked)
-
-
(Locked)
Learning objectives1m 21s
-
(Locked)
Getting started with JSX6m 40s
-
(Locked)
Creating a simple user interface via JSX13m 27s
-
(Locked)
Evaluating JavaScript expressions in JSX7m 4s
-
(Locked)
Data-driven JSX10m 52s
-
(Locked)
Passing properties to a component via JSX12m 56s
-
(Locked)
Additional JSX techniques16m 44s
-
(Locked)
Lab: using JSX9m 47s
-
(Locked)
Lab solution: Using JSX5m 24s
-
(Locked)
-
-
(Locked)
Learning objectives1m 16s
-
(Locked)
Getting started with hooks5m 58s
-
(Locked)
Introduction to React.useState13m 55s
-
(Locked)
Realistic example of React.useState11m 58s
-
(Locked)
Introduction to React.useEffect6m 28s
-
(Locked)
Defining cleanup behavior for an effect10m 24s
-
(Locked)
Defining effects with dependencies11m 51s
-
(Locked)
Lab: Hooks12m 8s
-
(Locked)
Lab solution: Hooks8m 8s
-
(Locked)
-
-
(Locked)
Learning objectives38s
-
(Locked)
Overview of REST services10m 29s
-
(Locked)
Implementing a simple REST service7m 47s
-
(Locked)
Calling a REST service on-demand13m 46s
-
(Locked)
Calling a REST service via a React effect11m 48s
-
(Locked)
Lab: calling REST services12m 44s
-
(Locked)
Lab solution: calling REST services4m 41s
-
(Locked)
-
-
(Locked)
Learning objectives48s
-
(Locked)
Introduction to memo-ization11m 48s
-
(Locked)
Memoization of components that receive properties10m 5s
-
(Locked)
Providing a custom comparison function for component properties11m 33s
-
(Locked)
Memoizing a particular piece of content9m 39s
-
(Locked)
Lab: Memoization11m 22s
-
(Locked)
Lab solution: Memoization6m 38s
-
(Locked)
-
-
(Locked)
Learning objectives1m 15s
-
(Locked)
Overview of single page applications (SPAs) and routing6m 49s
-
(Locked)
Running a sample application that uses routing5m 35s
-
(Locked)
Defining routes10m 59s
-
(Locked)
Defining a common layout7m 9s
-
(Locked)
Taking a closer look at the components in the example application5m 40s
-
(Locked)
Lab: introduction to routing27m 43s
-
(Locked)
Lab solution: Introduction to routing12m 23s
-
(Locked)
-
-
(Locked)
Learning objectives27s
-
(Locked)
Setting the scene4m 51s
-
(Locked)
Accessing elements in the DOM tree directly13m 43s
-
(Locked)
Accessing elements in an uncontrolled component11m 28s
-
(Locked)
Accessing elements in a controlled component9m 33s
-
(Locked)
Lab: user input techniques17m 40s
-
(Locked)
Lab solution: User input techniques7m 46s
-
(Locked)
-
-
(Locked)
Learning objectives58s
-
(Locked)
Recap of routing5m 38s
-
(Locked)
Introducing an application that illustrates additional routing techniques12m
-
(Locked)
Defining parameterized routes11m 16s
-
(Locked)
Navigating to a route programmatically8m 36s
-
(Locked)
Defining nested routes10m 37s
-
(Locked)
Loading data for a route11m 3s
-
(Locked)
Lab: Routing techniques17m 25s
-
(Locked)
Lab solution: Routing techniques5m 19s
-
(Locked)