React Frontend Development

Categories: Software Development

About Course

In this course, you will learn how to use the React JavaScript library to develop frontend web applications in-depth. The course covers key concepts, starting with the fundamentals of React, and then delving into Tailwind CSS for styling. You’ll also learn how to interact with data sources using React APIs and React Queries. The course culminates with an exploration of Next.JS which is a React Framework that can aid in building full-stack applications.

Course Content

1.1 Introduction To React
You will be introduced to the basics of React and learn some of the important fundamentals needed to build your first React application. By the end of this lesson you should be able to initialize a React application, understand the folder structure, and be able to create your first React component and pass information to it using props.

What is React?

12:37
Installing Node.js

03:43
Create React App with Create React App (CRA)

00:00
Create React Application Using Vite

04:14
React Structure

00:00
Introduction to Components

00:00
Introduction to JSX

00:00
Importing and Exporting Components

00:00
Coding Challenge

00:00

1.2 React Components
In React, a component is a single independent unit of a user interface (UI). What you write inside a component will determine what should appear on the browser screen at a given time.

1.3 JSX, Vercel Deployment, Lists and Keys

1.4 Props and State

1.5: WEEK 1 PROJECT

2.1 CSS in React
There are 4 common ways you can add CSS in a React application: Inline styling CSS files CSS modules Tailwind CSS This chapter will explore these 4 different ways to write CSS in React components, and which one you should use when starting a React application.

2.2 React Component Rendering

2.3 React Events
Under the hood, React has an internal event handler that connects to the native DOM event.

2.4 Using Fetch in React
Modern web applications tend to have a modular architecture, where the back end is separated from the front end. The front end app will need to send an HTTP network request to a remote endpoint.

2.5: WEEK 2 PROJECT

3.1 Routing
React is referred to as a Single Page Application SPA. To implement routing in React you need an external library called react-router-dom.

3.2 Hooks

3.3 Advanced Hooks in React

3.4 Handling Not Found Errors

3.5: WEEK 3 PROJECT

4.1 React CRUD
We're also going to separate the components into smaller pieces of the interface to make it easier to maintain.

4.2 State Management

4.3 Context API
The Context API provides a way to pass data into components without having to pass props manually between components. The API creates a global storage for states, and any component that requires the state data would simply access the API.

4.4: Testing in React

4.5: WEEK 4 PROJECT

Student Ratings & Reviews

No Review Yet

About Course

Course Content

What is React?

Installing Node.js

Create React App with Create React App (CRA)

Create React Application Using Vite

React Structure

Introduction to Components

Introduction to JSX

Importing and Exporting Components

Coding Challenge

1.2 React Components In React, a component is a single independent unit of a user interface (UI). What you write inside a component will determine what should appear on the browser screen at a given time.

Working With React Components

Returning Multiple Elements With Fragment

Rendering to the Screen

Writing Comments in React

Composing Multiple Components as One

Coding Challenge

1.3 JSX, Vercel Deployment, Lists and Keys

Making Use of JSX

Adding the Class Attribute

List and Keys

Vercel Deployment

Assignments

Coding Challenge

1.4 Props and State

Passing Data with Props and States

Passing Down Multiple Props

Props are Immutable

State in React

Passing State to a Child Component

Using React DevTools to inspect states and props

Coding Challenge

1.5: WEEK 1 PROJECT

WIZARD FORM APPLICATION

Submission Form

2.1 CSS in React There are 4 common ways you can add CSS in a React application: Inline styling CSS files CSS modules Tailwind CSS This chapter will explore these 4 different ways to write CSS in React components, and which one you should use when starting a React application.

React Inline Styling

CSS Files

CSS Modules

Tailwind CSS

Coding Challenge

2.2 React Component Rendering

Conditional Rendering

Partial rendering with a regular variable

Inline rendering with && operator

Inline rendering with conditional (ternary) operator

Coding Challenge

2.3 React Events Under the hood, React has an internal event handler that connects to the native DOM event.

Handling Events in React

onChange Event Handler

Wizard Form Submission

Coding Challenge

2.4 Using Fetch in React Modern web applications tend to have a modular architecture, where the back end is separated from the front end. The front end app will need to send an HTTP network request to a remote endpoint.

The useEffect Hook

2.5: WEEK 2 PROJECT

Wizard Form Application

Submission Form

3.1 Routing React is referred to as a Single Page Application SPA. To implement routing in React you need an external library called react-router-dom.

Introduction to React Router Dom

Installation, configuration and Usage

Defining Dynamic Routes

Passing Data with Dynamic Paths

Deploying Single Page Applications

Nested Routing in Practice

3.2 Hooks

useState Hook

useRef Hook

useMemo Hook

3.3 Advanced Hooks in React

Introduction to Advanced Hooks in React

Creating your own custom Hook

useReducer hook

useCallBack Hook

3.4 Handling Not Found Errors

Error Page Component

3.5: WEEK 3 PROJECT

Project

Submission Form

4.1 React CRUD We're also going to separate the components into smaller pieces of the interface to make it easier to maintain.

1.2 React Components
In React, a component is a single independent unit of a user interface (UI). What you write inside a component will determine what should appear on the browser screen at a given time.

2.1 CSS in React
There are 4 common ways you can add CSS in a React application: Inline styling CSS files CSS modules Tailwind CSS This chapter will explore these 4 different ways to write CSS in React components, and which one you should use when starting a React application.

2.3 React Events
Under the hood, React has an internal event handler that connects to the native DOM event.

2.4 Using Fetch in React
Modern web applications tend to have a modular architecture, where the back end is separated from the front end. The front end app will need to send an HTTP network request to a remote endpoint.

3.1 Routing
React is referred to as a Single Page Application SPA. To implement routing in React you need an external library called react-router-dom.

4.1 React CRUD
We're also going to separate the components into smaller pieces of the interface to make it easier to maintain.

4.3 Context API
The Context API provides a way to pass data into components without having to pass props manually between components. The API creates a global storage for states, and any component that requires the state data would simply access the API.