Prerequisites

To take this course, you should understand the basics of React, HTML, CSS, and JavaScript. Additionally, it always helps to have a can-do attitude!

Course content

This course covers advanced React development. You'll learn how to use more advanced React concepts and features, optimize and test your React applications, and become proficient in using React and JSX.

This course consists of four modules. They cover the following topics:

Week 01 Components

In this introductory module, you'll learn about React and your career opportunities. You'll also learn how to set up your coding environment so that you have as productive a learning experience as possible. The purpose of this module is to understand the what and the why behind learning React. You'll also learn about career opportunities and how to set up your coding environment for the most efficient and productive learning experience.

In React, everything revolves around components. You'll learn how to efficiently render list and form components, as well as how to lift up a shared state when several components need access to the data.

By the end of this module you will be able to:

• Outline React and various career opportunities.
• Render and transform lists with keys in React.
• Distinguish between controlled and uncontrolled React components.
• Create a controlled form component in React.
• Share component state by lifting state up to the closest common ancestor.
• Share global state using React Context.

Week02 React Hooks and Custom Hooks

The second module of this course covers React hooks and custom hooks. You'll learn how to use all the common hooks in React, and how to put them to use within your application. You will also test your skills by building your own custom hooks.

By the end of this module you will be able to:

• Explain the uses and purpose of React hooks.
• Detail the concept and nature of state and state change.
• Use the State hook to declare, read and update the state of a component.
• Use the Effect hook to perform side-effects within a React component.
• Use hooks to fetch data in React.
• Create appropriate custom hooks in React.

Week03 JSX and Testing

In this module, you'll learn about JSX and testing in React. You'll cover JSX in-depth and discover advanced patterns to encapsulate common behavior via Higher-order components and Render Props. You will then learn how to use Jest and the React Testing Library to write and perform tests on your applications.

By the end of this module, you will be able to:

• Define the types of children within JSX.
• Describe the process and purpose of creating render props.
• Describe the process and purpose of creating higher-order components.
• Use Jest and the React Testing Library to write and perform tests on your applications.

Week04 Graded Assessment

In this module, you will be assessed on the key skills covered in the course and create a project to add to your portfolio.

You will be provided with code snippets, and your task will be to use these, plus any of your own code to complete your developers' portfolio.

This is a creative project, and the goal is to use as many React concepts as possible within this portfolio. You can use component composition, code reusability, hooks, manage state, interact with an external API, create forms, lists and so on.

By the end of this module, you will be able to:

• Synthesize the skills from this course to create a portfolio.
• Reflect on this course's content and on the learning path that lies ahead.