The project you just downloaded uses React, one of the most popular and powerful libraries for building user interfaces in web applications. Created by Facebook, React has transformed the way developers create interactive and dynamic web pages by providing a more efficient method of updating the User Interface (UI).
What is React?
React is a JavaScript library designed to make the process of building complex, interactive UIs more manageable. It excels in handling the view layer for web and mobile apps, allowing developers to create reusable UI components that manage their own state.
Understanding React and ReactDOM
In the React ecosystem, two primary packages play a crucial role:
React: This package contains the core functionality of React, such as defining components, managing component lifecycle, and handling the component state.
ReactDOM: This package provides DOM-specific methods that can be used on the web platform, such as rendering components to the DOM and interacting with the DOM elements.
Here’s a simple example of using React and ReactDOM together:
In this code, ReactDOM.render() takes the Hello component and mounts it to the DOM at the specified container, #root. You can find the #root container <div id="root"></div> if you click on the “HTML” tab in the top menu of the code example.
👾 Exercise 1
Above, is our interactive code editor that allows you to play around with the examples we provide. We are an international community, please try to change the “Hello World” message to some other language that you speak. If you speak only English, let's learn how to say “Hello World” in Spanish: “Hola Mundo”.
- Click on the “Edit” button on the top right part of your editor
- Click on “Script” tab in the top menu of the editor
- Change the “Hello World” to your target sentence
- Click Play
- Observe the magic 🪄
React vs. Vanilla JavaScript DOM Manipulations
React differs significantly from vanilla JavaScript (plain JavaScript without libraries or frameworks) when it comes to DOM manipulation. Let's explore these differences through an example:
Vanilla JavaScript:
document.getElementById('app').innerHTML = '<h1>Hello, world!</h1>';
React
function Hello() {
return <h1>Hello, world!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('app'));
Key Differences:
Declarative vs. Imperative: React is declarative, which means you tell the program what you want to happen and let React take care of how it happens. Vanilla JavaScript is more imperative, meaning you have to describe step-by-step how things are done.
Efficiency: React minimizes DOM manipulation by using a virtual DOM. When changes are made to the state of an application, React compares the new state with the old state and calculates the minimal set of changes required to update the actual DOM. This leads to a significant performance boost compared to direct DOM manipulation, which is common in vanilla JavaScript.
Reusability: Components in React can be reused across different parts of an application, even with different properties. This modularity is less natural in vanilla JavaScript, where code often becomes repetitive and harder to maintain.
Tooling and Ecosystem: React is accompanied by a vast ecosystem, including powerful frameworks such as Next, state management libraries (like Mobx), routing solutions (like React Router), and more. Vanilla JavaScript, while powerful and flexible, typically requires more configurations and glue code to achieve similar functionality.
By using React, developers can build more robust and maintainable applications. As you dive deeper into React throughout this course, you'll learn not just how to create interactive elements, but also how to structure large applications, manage state more effectively, and optimize performance. This introduction sets the stage for an in-depth exploration of React's capabilities and how they can be harnessed to create better web experiences.
In the next section we will install React in our project and start working on our assignment.
SkillPies
