React is the most popular framework for building user interfaces. In this course, you will learn the fundamental concepts needed to start building applications with React.
1. 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 will learn the most up-to-date methods to code components with hooks, state, props and events.
- using props to pass parameters to components
- how to validate the props and supply them with default values
- using state in components
- how to handle DOM events and create your own custom events for components
- using hooks inside your components
In the final part of the course, you will learn some key skills for building real-world applications with React
- using React with Forms
- model your components with CSS modules
- connecting to an external REST API
- creating a single page application with React Router
At the end of this course you will have the confidence and you will know how to create your own React based apps!
Build your first React app
Watch the video lesson [0:02:19] ↗
You can build applications with React without using toolchain, just the React library and pure JavaScript.
To follow along, all you need is a source code editor such as Visual Studio Code and React CDN links.
Presentation of the components
Watch the video lesson [0:12:20] ↗
React applications are built with components. You will learn what components are and how to create them with the React library.
To keep the tradition, we create a Hello World component:
let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
Configure your environment
Watch the video lesson [0:18:46] ↗
To use React with a chain of tools, you’ll need to install Node.js on your computer. This will give us access to NPM, which will simplify the installation of all React dependencies.
After installing 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 scaffold for a named React application reaction fundamentals, ready to use with an updated toolchain. After creating your app, run npm start to compile and run your app in the browser with real-time reload.
cd react-fundamentalsnpm start
-
Server-side JavaScript learning with Node.js
Presentation of JSX
Watch the 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 a few rules you need to follow if you use JSX and you will learn which ones are in this lesson.
Starting from scratch
Watch the video lesson [0:32:40] ↗
I always find it helpful to start completely from scratch. So in this lesson we’re going to do just that.
Use of fragments
Watch the video lesson [0:40:28] ↗
Since components need to return only one React element, it is sometimes useful to use a React Fragment. You will learn the different ways to express a fragment in this lesson.
Separate JavaScript and JSX
Watch the video lesson [0:51:28] ↗
Using JavaScript with JSX allows you to 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 will learn how you can do it in this lesson.
React doesn’t aim to separate markup and logic by putting them into separate files. Instead, it relies on components to divide the user interface into multiple entities that can function independently. It is our job to keep our logic separate from the markup within the component. The best way to do this is to set everything up in JavaScript in advance and use JSX to build our UI based on the final data.
4. Working with data
Pass the data with the props
Watch the video lesson [0:59:30] ↗
In React, we mainly use props (short for properties) to pass data to our components.
The easiest way to understand props is to think of them as the attributes you can pass to HTML elements in web development. However, props they are much more advanced.
Validation of props
Watch the video lesson [1:06:57] ↗
Props are not validated by default – you need to activate to validate your props. It is more of a development and debugging tool than anything else.
Provide default prop values
Watch the video lesson [1:15:37] ↗
Defining defaults for your props can be helpful. You will learn how to do this in this lesson.
Start with the state
Watch the video lesson [1:20:14] ↗
State is used to manage information or data within React components. Unlike props, status data can be changed over the life of the component.
State is how React knows how to re-render components. I will introduce you to the status in this lesson.
DOM event management
Watch the 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 the video lesson [1:35:08] ↗
Traditionally, components have been written as classes. In this lesson we will convert one of our function components into a class.
Use of controlled inputs
Watch the video lesson [1:45:33] ↗
There are two ways to work with modules in React. In this lesson I will show you how to use “controlled inputs”.
The controlled inputs are those elements of the module whose value is controlled by the state of the React component. They are the preferred way to handle form input with React.
Lift status and custom events
Watch the video lesson [1:57:21] ↗
Many times, we want to elevate the status from child component to parent component. We will go through this process and show you how to create your own custom events.
Use of uncontrolled inputs
Watch the video lesson [2:04:33] ↗
A less tedious way of working 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’s no need to create onChange event listener or use a value attribute.
5. Styling components
Styling with online styles
Watch the video lesson [2:15:56] ↗
Using inline styles in React isn’t a bad thing like regular HTML. In this lesson I’ll show you how to use the style attribute for React classes.
Use of CSS modules
Watch the video lesson [2:23:15] ↗
CSS module support is provided immediately with create-react-app. You will learn what CSS modules are and some of the reasons why you might want to use them.
Using the
stylethe attribute as the main means of styling elements is generally not recommended. In most cases,classNameshould be used to refer to classes defined in an external CSS style sheet. – React documents
6. Working with external data
Preparing the weather widget
Watch the video lesson [2:31:34] ↗
We will build a real weather widget using a free weather API. But first, we need to lay the groundwork for this.
Management of side effects in class components
Watch the video lesson [2:38:46] ↗
Handling Side Effects in Class Components Processes that have side effects, such as an HTTP request, must be handled properly. In this lesson, you will learn lifecycle events within a class component and how to use them to retrieve external data.
Using Hook Effects in Function Components
Watch the video lesson [2:47:35] ↗
Using Hook Effects in Function Components Function components have no lifecycle events; instead, we need to use hooks to “hook” that functionality.
Make demands on our components
Watch the video lesson [2:54:41] ↗
Making requests in our components It’s time to finally send HTTP requests to the weather API! We will use the Weatherstack API.
7. Creating single page applications
Introducing React Routing
Watch the video lesson [3:04:10] ↗
We use a package called react-router-dom to provide routing in our apps. You will learn how to install it and set paths in this lesson.
Use of layout and definition of nested paths
Watch the video lesson [3:14:02] ↗
Layout paths are vital to any web application; they allow us to define the look and feel of our applications within a single component.
Using path parameters
Watch the video lesson [3:21:38] ↗
Path parameters are the essential way we pass information to the path management components. You will learn how to use them in this lesson.
Using side effects in router pages
Watch the video lesson [3:29:40] ↗
It can be a little tricky to use the side effects in one course. I’ll show you how in this lesson. We will retrieve the data from Newsapi.org.
8. Conclusion
React has unquestionably changed the way we build web applications, and it is my hope that as I leave you, you have the fundamental understanding of how to effectively use React to build applications.
