Gain insights into React fundamentals and Hooks. Delve into styling, app maintenance, and performance optimization. Discover hands-on experience by building a Hacker News app for your portfolio.

road_to_react.tar.gz

React JSX-copy

axios-react

Typescript-React

React World (Advanced)

Unit_Integration_test

Unit Integration test Jest

This is a relaunch of my existing course, The Road to Learn React. A lot has changed in React since I first created this course, and so here I am to give you all the information you need to work with modern React. (If you’re looking for content on legacy React, the old course is still available as well.)

In this course you will take a deep dive into React fundamentals, covering all new React concepts including Hooks. I do address some legacy features in case you’re working with an older codebase, but the majority of this course will focus on working with modern React. You will learn how to style your app, techniques for maintaining your app, and some more advanced concepts like performance optimization.

Throughout the course, you will gain hands-on experience by building a Hacker News app, and by the end of this course, you will be prepared to build your own applications and have something to showcase in your portfolio.

The Road to React: The One with Hooks

We've covered most of React's fundamentals, its legacy features, and techniques for maintaining applications. Now it's time to dive into developing real-world React applications. Each of the following sections will come with a task. Try to tackle these tasks without the *optional hints* first, but be aware that these are going to be challenging on your first attempt. If you need help, use the *optional hints* or follow the instructions from the section.

---
# Task
Working with a list of items often includes interactions that make data more approachable by users. So far, every item was listed with each of its properties. To make it explorable, the list should enable sorting of each property by title, author, comments, and points in ascending or descending order. Sorting in only one direction is fine, because sorting in the other direction will be part of the next section.

**Optional Hints:**

* Introduce a new sort state in the App or List component.
* For each property (e.g. `title`, `author`, `points`, `num_comments`) implement an HTML button which sets the sort state for this property.
* Use the sort state to apply an appropriate sort function on the `list`.
* Using a utility library like [Lodash](https://lodash.com/) for its `sortBy` function is encouraged.



Introduction

Fundamentals of React

React Legacy

Styling in React

React Maintenance

React World (Advanced)

Deploying a React Application

Final Words

Appendix

Challenge: Sorting