Introduction to React
INTERMEDIATE
#Web Development
Author: M. Mouiz Ghouri
Course description
In this course, we will learn how to use the JavaScript React library for making front-end applications. This course will help you understand the structure of a React application, how to add it to an existing website, and how to set up a React app from scratch. You will learn how to easily create React applications and expand them further for more advanced purposes. This course is intended for beginners though basic knowledge of JavaScript is required.
Complete all chapters to get certificate
0%
Getting Started: ES6
In this section we will explore why React is useful and why it is worth learning it at all. We will also learn one prerequisite, ES6, which will be used throughout the course.
Why React?
Node.js and npm
ES6 Variables
ES6 Arrow Functions
ES6 Map Method
ES6 Destructuring
ES6 Spread Operator
ES6 Ternary Operator
Getting Started: JSX
In this section, we will learn another prerequisite - JSX which will be used throughout the course. Finally, we will explore some example code to get acquainted with React.
JSX Introduction
JSX Variables & Nested Elements
JSX Embedding Expressions
JSX Specifying Attributes
Getting Started with React
React in Practice
In this section we will learn about the essential and practical parts of React excluding the components – which will be covered in the next section. We will look at how JSX can be used with React, and how to create and render more complex elements in the React DOM using JSX. We will also learn how to set up a React based project, and we will explore its structure for deepening our understanding.
Getting familiar with JSX
Writing more Complex Elements using JSX
Creating a React-Based Project
Structure of a React Project
React Components
In this section you’ll be introduced to React components. We will look at what React components are and why we need them. We will explore the two different types of React components and learn the syntax for creating them. We will use them to create a single page application that displays X.
Introduction to Components
Functional Components
Creating React Components
Importing Components
Controlling Data & Content
In this section we will learn more about how to combine JavaScript and JSX to create dynamic content. We will also learn how to pass data between components. In the end we will also explore event handling.
Passing Data into Components
Conditional Rendering
Loop Based Rendering
Keys in Lists
Event Handling
Creating a TODO Application
Hooks
In the end of the previous chapter, we tried making a Todo application though in our attempt to do so we soon discovered that we needed some method for re-rendering the components once the data is updated in a component as React wasn’t automatically doing that for us. In this section we will learn how to fix such issues using ‘Hooks’. We will learn and implement hooks in detail. By the end of this section, you will be able to create stateful components in React and combine them to create complex web applications.
Introduction to Hooks
Using the State Hook
The Effect Hook
Rules of Using Hooks
Creating Custom Hooks
Fixing the Todo Application
React Router
In this chapter we will learn how to add different pages to our React application and render different components based on URL. You will gain sufficient knowledge to be able to create multi-page applications.
Introduction to React Router
Route-Based Rendering
Creating Navigation Bars
Using Params