In this comprehensive guide, we will take our first steps into the world of React. We’ll delve into React’s background, explore its versatile use cases, set up a basic React development environment on your local computer, and create a simple starter app. Along the way, you’ll gain insights into how React operates and its core principles.
To build web applications, developers commonly pair React with ReactDOM. React and ReactDOM are often mentioned alongside true web development frameworks, which has led to colloquial usage referring to React as a “framework.” In this article, we will adopt this common terminology for ease of understanding.
React’s primary mission is to reduce the occurrence of bugs while crafting user interfaces. It accomplishes this through the use of components—self-contained, logical code segments that define specific portions of the user interface. These components can be combined to construct a complete user interface, abstracting much of the rendering complexity and allowing developers to focus on UI design.
Unlike some other frameworks, React doesn’t impose strict rules on code conventions or file organization. This flexibility empowers development teams to establish conventions that best suit their needs and adopt React in a manner that aligns with their project’s requirements. React can be employed to handle a single button, a few UI elements, or an entire application’s user interface.
While React can certainly be used for small UI components, its true potential shines when you build your entire application using React. It’s not as straightforward to integrate React incrementally into an existing project compared to libraries like jQuery or frameworks like Vue. React often requires a compilation process, which can introduce some complexity to your development workflow.
const heading = <h1>Mozilla Developer Network</h1>;
heading constant represents a JSX expression that React can use to render an
<h1> tag within our app. JSX facilitates nesting elements just like HTML:
const header = (
<h1>Mozilla Developer Network</h1>
Although it’s possible to bypass the compilation step and use
While there are various ways to work with React, we will focus on using the command-line interface (CLI) tool called
create-react-app. This tool streamlines the development process by handling package installations, file creation, and tooling setup.
Before you dive into React with
create-react-app, ensure you have Node.js installed, preferably the long-term support (LTS) version. Node.js includes npm (Node Package Manager) and npx (Node Package Runner), which are crucial for our development.
If you prefer Yarn as a package manager, it’s a viable alternative. However, for the purpose of this tutorial, we’ll assume you are using npm. You can learn more about npm and Yarn in the “Package Management Basics” section.
On Windows, you may need additional software to mimic Unix/macOS terminal functionality for executing the terminal commands mentioned in this tutorial. Tools like Gitbash (part of the git for Windows toolset) or Windows Subsystem for Linux (WSL) are suitable options. Refer to the “Command Line Crash Course” for more insights into these tools and terminal commands.
Moreover, keep in mind that React and ReactDOM are best suited for modern browsers (e.g., Firefox, Microsoft Edge, Safari, or Chrome). These libraries may require polyfills to work with older browsers like IE9+. Using a modern browser will ensure a smooth learning experience.
To kickstart your React journey, use the
create-react-app CLI with the desired app name. This command not only creates a new directory but also installs essential npm packages, generates scripts for running your application, and establishes the basic project structure. If you have Git installed, it even initializes the directory as a Git repository.
Execute the following command in your terminal after navigating to your preferred project location:
npx create-react-app moz-todo-react
This command will create a
moz-todo-react directory and handle the necessary setup tasks for you.
We’ve reached the end of our initial exploration of React, covering local installation, app setup, and fundamental concepts. In the upcoming article, we will delve deeper into React’s capabilities by building a practical application—a to-do list. But before we proceed, let’s recap some essential takeaways:
class in HTML becomes
className in JSX, and multi-word attributes follow camelCase.
Stay tuned for the next installment, where we will embark on the exciting journey of building a React-powered to-do list application!