Summary and Key Takeaways

• React is a library, though it’s actually a combination of two main packages: react and react-dom.
• Though it is possible to build non-trivial UIs without React, simply using vanilla JavaScript to do so can be cumbersome, error prone, and hard to maintain.
• React simplifies the creation of complex UIs by providing a declarative way to define the desired end states of the UI.
• Declarative means that you define the target UI content and structure, combined with different states (e.g., “Is a modal open or closed?”), and you leave it up to React to figure out the appropriate DOM instructions.
• The react package itself derives UI states and manages a virtual DOM. It is a “bridge,” like react-dom or react-native, that translates this virtual DOM into actual UI (DOM) instructions.
• With React, you can build SPAs, meaning that React is used to control the entire UI on all pages as well as the routing between pages.
• You can also use React, in combination with frameworks like Next.js, to build full-stack web applications where server- and client-side code are connected.
• React projects can be created with the help of the Vite package, which provides a readily configured project folder and a live preview development server.

What’s Next?

At this point, you should have a basic understanding of what React is and why you might consider using it, especially for building non-trivial UIs. You learned how to create new React projects with Vite, and you are now ready to dive deeper into React and the actual key features it offers.

In the next chapter, you will learn about a concept called components, which are the fundamental building blocks of React apps. You will learn how components are used to compose UIs and why those components are needed in the first place. The next chapter will also dive deeper into JSX and explore how it is transformed into regular JavaScript code and which kind of code you could write alternatively to JSX.

Test Your Knowledge!

Test your knowledge about the concepts covered in this chapter by answering the following questions. You can then compare your answers to example answers that can be found here: https://github.com/mschwarzmueller/book-react-key-concepts-e2/blob/01-what-is-react/exercises/questions-answers.md.

1. What is React?
2. Which advantage does React offer over vanilla JavaScript projects?
3. What’s the difference between imperative and declarative code?
4. What is a Single-Page-Application (SPA)?
5. How can you create new React projects and why do you need such a complex project setup?