1. Introduction
This course is 3 hours 40 minutes long, and it’s split into 27 lessons in total. You’ll find it’s a great resource that you will come back to often, so make sure you bookmark the parts that interest you.
Who Is This Course For?
- Designers who want to branch out
- Programmers who want to expand their expertise
- Anyone who wants to learn something new and exciting
Follow Along, Learn by Doing
I encourage you to follow along and to do exactly what you see on screen. This way, you learn by doing.
To help, the React course GitHub repository contains the source code for each lesson and the completed sample project that was built throughout the course.
What You Will Learn in This Free React Course
You'll start 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 of 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, you will have the confidence and know-how to build your own React-powered apps!
2. Building Your First React App
t'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.
3. Introducing Components
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:
1 |
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!'); |
4. Setting Up Your Environment
To use React with a toolchain, 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:
1 |
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.
1 |
cd react-fundamentalsnpm start
|
5. Introducing JSX
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.
6. Starting From Scratch
I always find it beneficial to start completely from scratch. So in this lesson, we'll do just that.
7. Using Fragments
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.
8. Separating JavaScript and JSX
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.
9. Passing Data With Props
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.
10. Validating Props
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.
11. Providing Default Prop Values
Defining default values for your props can be beneficial. You'll learn how to do that in this lesson.
12. Getting Started With State
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.
13. Handling DOM Events
Events are vital to any graphical user interface. I'll show you how to handle native DOM events in this lesson.
14. Writing Components as Classes
Traditionally, components have been written as classes. We'll convert one of our function components to a class in this lesson.
15. Using Controlled Inputs
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.
16. Lifting State and Custom Events
A lot of the time, we want to lift the state from a child to a parent component. We'll go through that process, and I'll show you how to create your own custom events.
17. Using Uncontrolled Inputs
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.
18. Styling With Inline Styles
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.
19. Using CSS Modules
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
20. Preparing the Weather Widget
We'll build a real weather widget by using a free weather API. But first, we need to lay the framework for it.
21. 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 lifecycle events within a class component, and how to use them to fetch external data.
22. 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.
23. Making Requests in Our Components
It's time to finally issue HTTP requests to the weather API! We'll use the Weatherstack API.
24. Introducing React Routing
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.
25. Using Layouts and Defining Nested Routes
Layout routes are vital to any web application; they allow us to define the look and feel of our applications within a single component.
26. Using Route Parameters
Route parameters are the essential way we pass information to route-handling components. You'll learn how to use them in this lesson.
27. Using Side Effects in Router Pages
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.
28. Conclusion
React unquestionably changed the way we build web applications, and it's my hope that if you followed all the lessons in this course, you now have a fundamental understanding of how to effectively use React to build applications.
