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

# Foreword

The Road to React teaches the fundamentals of React <img src="data:image/png;base64,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" width="40" align="top">. You will build a real-world application in plain React without complicated tooling. Everything from project setup to deployment on a server will be explained for you. The course comes with additional referenced reading material and exercises with each chapter. After reading the course, you will be able to build your own applications in React. The material is kept up to date by myself and the community.

In the Road to React, I offer a foundation before you dive into the broader React ecosystem. The concepts will have less tooling and less external state management, but a lot of information about React. It explains general concepts, patterns, and best practices in a real-world React application.

Essentially, you will learn to build your own React application from scratch, with features like pagination, client-side and server-side searching, and advanced interactions like sorting. I hope this course captures my enthusiasm for React and JavaScript, and that it helps you get started with it.


# Pre-requisites and learning outcome
 
* JavaScript beginners with knowledge in fundamental JS, CSS, and HTML: If you just started out with web development, and have a basic grasp about JS, CSS, and HTML, this course should give you everything that's needed to learn React. However, if you feel there is a gap in your JavaScript knowledge, don't hesitate to read up on this topic before continuing with the course. You will have lots of references to this fundamental knowledge in the course though.

* JavaScript veterans coming from jQuery: If you have used JavaScript with jQuery, MooTools, and Dojo extensively back in the days, the new JavaScript era may seem overwhelming for someone getting back on track with it. However, most of the fundamental knowledge didn't change, it's still JavaScript and HTML under the hood, so this course should give you the right start into React.

* JavaScript enthusiasts with knowledge in other modern SPA frameworks: If you are coming from Angular or Vue, there may be lots of differences in how to write applications with React, however, all these frameworks share the same fundamentals of JavaScript and HTML. After a mindset shift to get comfortable with React, you should be doing just fine adopting React.

* If you are coming from another programming language, you should be more familiar than others about the different aspects of programming. After picking up the fundamentals about JavaScript and HTML, you should have a good time learning React with me.

* If your main profession is in design, user interaction or user experience, don't hesitate to pick up this course. You may be already quite familiar with HTML and CSS which is a plus. After going through some more JavaScript fundamentals, you should be good to get through this course. These days UI/UX are moving closer to the implementation details which are often taken care of with React. It would be your perfect asset to know how things work in code.

* If you are a Product Owner or Product Manager of your development department, this course should give you a good breakdown of all the essential parts in a React application. Every section explains one React concept/pattern/technique to add another feature or to improve the overall architecture. It's a well rounded reference guide for React.



> 📜 You can get information about the [author](https://www.educative.io/courses/road-to-react-with-hooks/about-the-author) and can get help from [FAQs](https://www.educative.io/courses/road-to-react-with-hooks/faq).

----
Let's get started with displaying hello world app in a react app in the next lesson.

Get a brief look at what we are going to learn in this course and who should read this course?

Introduction

Fundamentals of React

React Legacy

Styling in React

React Maintenance

React World (Advanced)

Deploying a React Application

Final Words

Appendix

Who Is This Course For?

Foreword