Explore React fundamentals including JSX, components, props, state, data fetching, styling, and performance optimization while building practical solutions through hands-on coding challenges.

React for Front-End Developers

In this module, you will explore the **fundamentals of React** and learn how modern JavaScript concepts translate into building dynamic user interfaces. You will begin by revisiting key JavaScript features used in React, such as **arrow functions, destructuring, higher-order functions, and array methods like map, reduce, and filter**. You will also learn about **modularity, imports and exports, and how React project directories are structured**.

Next, you will build your first React components and understand how **JSX, props, and state** work together to create interactive interfaces. You will explore advanced concepts such as **lifting state, controlled components, side effects, conditional rendering, asynchronous data handling, and creating reusable components with composition and custom hooks**. You will also learn how to fetch and re-fetch data, work with third-party libraries, and manage forms in React applications.

The module will also introduce **React legacy concepts**, including class components and imperative React, to help you understand how React has evolved over time.

You will then explore **styling techniques in React**, including standard CSS, CSS modules, and working with SVGs. Finally, you will learn strategies for **maintaining and optimizing React applications**, such as avoiding heavy computations, improving performance, and understanding testing practices and project structure.

Throughout the module, you will reinforce your learning with **practical coding challenges**, applying your knowledge to solve real problems like sorting data, remembering user searches, avoiding duplicates, and implementing paginated data fetching.

The Road to React: The one with Hooks

React is only the view layer for your application. There is some internal state management offered by React, but apart from this, it is only a component library which renders HTML for your browser. Everything else can be added from APIs (e.g. browser API, DOM API), JavaScript functionalities or external libraries. It’s not always simple to choose the right library for complementing your React application, but once you have a good [overview](https://www.robinwieruch.de/essential-react-libraries-framework/) of the different options, you can pick the one which fits best to your tech stack.

For instance, [fetching data in React](https://www.robinwieruch.de/react-fetching-data/) can be done with the native fetch API like so. *Lines 2 and 3* define constant variables that return a JSON based on a query from a website (API). *Lines 15-17* in the `componentDidMount()` method (this will be discussed in future lessons) fetch the data and set the title within the state to a title returned in the JSON file from the API given here.

A brief introduction to React APIs and their uses.

Libraries in React