React is the most popular framework for building user interfaces. In this course you will learn the fundamental concepts you need to start building applications with React.
1. What You Will Learn in This Free React Course
You’ll start of with the basics of React—coding your first components:
- using React with vanilla JavaScript
- the basics of the React Toolchain
- the rules of JSX and how to use it to build components
Then, you’ll learn the most up-to-date methods to coding components with hooks, state, props, and events.
- using props to pass parameters to components
- how to validate props and provide default values for them
- using state in components
- how to handle DOM events and create your own custom events for components
- using hooks within your components
In the final part of the course, you’ll learn some key skills for building real-world applications with React
- using React with forms
- styling your components with CSS modules
- connecting to an external REST API
- building a single page application with React Router
By the end of this course your will have the confidence and know how to build your own React-powered apps!
Building Your First React App
Watch video lesson [0:02:19] ↗
It’s possible to build applications with React without using any toolchains—just the React library and pure JavaScript.
To follow along, all you need is a source code editor like Visual Studio Code and the React CDN links.
Introducing Components
Watch video lesson [0:12:20] ↗
React applications are built with components. You’ll learn what components are and how to create them with the React library.
To keep with tradition, let’s create a Hello World component:
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
Setting Up Your Environment
Watch video lesson [0:18:46] ↗
To use React with a tool-chain, you’ll need to install Node.js on your computer. This will give us access to NPM, which will make it easy to install all the React dependencies.
Once you’ve installed Node, you can install and run the create-react-app tool with the following command:
npx create-react-app react-fundamentals
This will give you the source code scaffolding for a React application named react-fundamentals, ready to go with an up-to-date toolchain. Once you have created your app, just run npm start to compile and run your app in the browser with live reloading.
cd react-fundamentalsnpm start
Introducing JSX
Watch video lesson [0:23:09] ↗
You can build a React app with pure JavaScript, but with JSX it’s much easier. JSX is a special syntax that allows you to combine JavaScript and XML to quickly code components.
There are some rules you need to follow if you use JSX, and you’ll learn what they are in this lesson.
Starting From Scratch
Watch video lesson [0:32:40] ↗
I always find it beneficial to start completely from scratch. So in this lesson, we’ll do just that.
Using Fragments
Watch video lesson [0:40:28] ↗
Since components have to return just a single React element, sometimes it’s useful to use a React Fragment. You’ll learn the different ways to express a fragment in this lesson.
Separating JavaScript and JSX
Watch video lesson [0:51:28] ↗
Using JavaScript with JSX lets you write cleaner components with more complex data processing and logic.
Even though we’re in this new paradigm, we still want to separate our JavaScript code from our JSX. JSX should be expressive, and you’ll learn how you can do that in this lesson.
React does not aim to separate markup and logic by placing them in separate files. Instead, it relies on components to split your UI into multiple entities which can function independently. It is our job to keep our logic separate from the markup within the component. The best way to do so is to set everything up in JavaScript beforehand and use JSX to then create our UI based on the final data.
4. Working With Data
Passing Data With Props
Watch video lesson [0:59:30] ↗
In React, we primarily use props (short for properties) to pass data to our components.
The easiest way to understand props is to think of them like the attributes that you can pass to HTML elements in web development. However, props are much more advanced.
Validating Props
Watch video lesson [1:06:57] ↗
Props are not validated by default—you have to opt in to validate your props. It’s more of a development and debugging tool than anything else.
Providing Default Prop Values
Watch video lesson [1:15:37] ↗
Defining default values for your props can be beneficial. You’ll learn how to in this lesson.
Getting Started With State
Watch video lesson [1:20:14] ↗
State is used to manage information or data within React components. Unlike props, the state data can be changed throughout the lifetime of the component.
State is how React knows to re-render components. I’ll introduce you to state in this lesson.
Handling DOM Events
Watch video lesson [1:29:23] ↗
Events are vital to any graphical user interface. I’ll show you how to handle native DOM events in this lesson.
Writing Components as Classes
Watch video lesson [1:35:08] ↗
Traditionally, components have been written as classes. We’ll convert one of our function components to a class in this lesson.
Using Controlled Inputs
Watch video lesson [1:45:33] ↗
There are two ways to work with forms in React. In this lesson, I’ll show you how to use “controlled inputs”.
Controlled inputs are those form elements whose value is controlled by the React component state. They are the preferred way of handling form input with React.
Lifting State and Custom Events
Watch video lesson [1:57:21] ↗
A lot of the time, we want to lift the state from a child to parent component. We’ll go through that process, and I’ll show you how to create your own custom events.
Using Uncontrolled Inputs
Watch video lesson [2:04:33] ↗
A less tedious way to work with forms is with “uncontrolled inputs”. I’ll show you how to use them in this lesson.
With uncontrolled inputs, we don’t have to worry about setting or updating input values so there is no need to create onChange event listeners or use a value attribute.
5. Styling Components
Styling With Inline Styles
Watch video lesson [2:15:56] ↗
Using inline styles in React isn’t a bad thing like it is in regular HTML. In this lesson I’ll show you how to use the style attribute for React classes.
Using CSS Modules
Watch video lesson [2:23:15] ↗
CSS module support is provided out of the box with create-react-app. You’ll learn what CSS modules are and some of the reasons why you may want to use them.
Using the
styleattribute as the primary means of styling elements is generally not recommended. In most cases,classNameshould be used to reference classes defined in an external CSS stylesheet. — React docs
6. Working With External Data
Preparing the Weather Widget
Watch video lesson [2:31:34] ↗
We’ll build a real weather widget by using a free weather API. But first, we need to lay the framework for it.
Handling Side Effects in Class Components
Watch video lesson [2:38:46] ↗
Handling Side Effects in Class Components Processes that have side effects, like an HTTP request, should be handled properly. In this lesson, you’ll learn about life-cycle events within a class component, and how to use them to fetch external data.
Using the Effects Hook in Function Components
Watch video lesson [2:47:35] ↗
Using the Effects Hook in Function Components Function components don’t have life-cycle events; instead, we must use hooks to “hook into” that functionality.
Making Requests in Our Components
Watch video lesson [2:54:41] ↗
Making Requests in Our Components It’s time to finally issues HTTP requests to the weather API! We’ll use the Weatherstack API.
7. Building Single-Page Applications
Introducing React Routing
Watch video lesson [3:04:10] ↗
We use a package called react-router-dom to provide routing in our apps. You’ll learn how to install it and set up routes in this lesson.
Using Layouts and Defining Nested Routes
Watch video lesson [3:14:02] ↗
Layout routes are vital to any web application; they allow us to define the look and feel of our applications within a single component.
Using Route Parameters
Watch video lesson [3:21:38] ↗
Route parameters are the essential way we pass information to route-handling components. You’ll learn how to use them in this lesson.
Using Side Effects in Router Pages
Watch video lesson [3:29:40] ↗
It can be a little tricky to use side effects in a route. I’ll show you how in this lesson. We’ll fetch data from Newsapi.org.
8. Conclusion
React unquestionably changed the way we build web applications, and it’s my hope that as I leave you, that you have the fundamental understanding of how to effectively use React to build applications.