Learn React page
Learn React by building the feature-rich Place My Order application in this beginner React guide. This hands-on course will introduce you to fundamental React concepts! By the end of this course, you will have a strong understanding of JSX, function components, styling, state management, Hooks, data fetching, routing, and testing.
Before you begin
Click here to join the
Bitovi Community Discord
Join the Bitovi Community Discord to get help with this React course or any other JavaScript problem.
If you find bugs in this training or have suggestions, create an issue or email contact@bitovi.com.
Prerequisites
Before beginning this tutorial, you will want to have some familiarity with HTML and JavaScript. Specifically, you will need to understand functions, objects, and arrays. Additionally, you should be familiar with some of the more recent ECMAScript features, such as arrow functions, let, const and the rest operator.
It is also beneficial to have some familiarity with Node.js and npm, although it is not strictly necessary to begin.
How to follow this course
This course will walk you through building an application with React. Each page of the guide is based on building a new feature, and may have multiple “objectives” to complete. Each objective will be explained and include the requirements and any setup steps needed. Most objectives will also include unit tests to update to verify when you have implemented the solution correctly.
The ✏️ icon will be used to indicate when commands need to be run or when files need to be created or updated.
If you have any issues or suggestions as you move through this training, we’d love for you to submit a GitHub issue for it! 💖
Course outline
This guide begins by walking you through how to set up an environment, providing an introduction into JSX (JavaScript flavor of XML) and some basic React theory.
Once you’re all setup and oriented into the framework, you’ll learn how to build reusable web components using props, and you will discover the difference between controlled & uncontrolled components. You’ll also learn the various ways of doing styling, and how CSS can be integrated into JSX.
The second half of the guide will cover more intermediate topics like state management using Hooks and using useEffect to fetch data.
Throughout this guide, we’ll be building out a feature-rich Place My Order application, gradually applying all of these concepts to produce a clean and optimized solution!
Next steps
✏️ Head over to the first lesson to get a more thorough overview of React and the technologies it provides.