A Developer's Guide to Mastering Core React Concepts

In this article, I want to introduce you to React and go over the core concepts I think every React developer should aim to learn and master. When it came to putting these concepts together, I selected them based on things you'll need to build out most of the functionality that you see in websites today and things somebody interviewing you would probably expect you to know.

What is React?

React is a JavaScript library for building out user interfaces. When you look at websites like Facebook, Netflix, and Airbnb, you're looking at UIs built in React. React provides us with a set of tools and a structure for building out these user interfaces and makes this process much faster and easier.

Understanding Single-Page Applications (SPAs)

With React, it's very common to build out single-page applications. So before we get into the React concepts, I want to quickly recap single-page applications and how they work for anybody that's not familiar with this concept yet.

In traditional websites, we have a template for each page on our website and return that template back to the user whenever they request it. With single-page applications, however, we are working with one single template and are simply updating all the components within the DOM. Personally, I think the term "single-page application" is a bit misleading, as it makes me think there is only one page in our application, when really we're just using one single template and modifying all the contents within it.

The Role of Components

Components are what make up the visual layer of our application and let us split up our UI into independent, reusable pieces. While how you build and structure your application is completely up to you, traditionally, each part of our UI would be built out separately as its own component and then added into a parent component, making up the UI for a specific page.

A component is a JavaScript class or function that returns what looks like HTML, but is actually something called JSX (more on that in a second). One thing to note about components is that they can be nested as deep as you want. A component can hold another component, and that component can hold more components.

While I do think you should learn both class-based components and function-based components at some point, with the addition of React Hooks, the trend is shifting more towards using functional components. So if you're trying to decide which to learn first, you can probably start with functional components.

JSX: JavaScript XML

Instead of writing traditional HTML tags, in React, we use something called JSX, which stands for JavaScript XML. JSX actually looks a lot like HTML with some slight syntax differences and also gives us some added functionality. For example, you can use curly braces to pass in variables and add JavaScript logic directly into your markup:

const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

JSX tags are actually very similar to HTML tags. Some notable differences are that class attributes are written as className and event handlers are camelCased. Browsers can't actually read JSX, so this code will be run through a compiler and converted into traditional HTML and JavaScript code once it's output in the browser.

Navigating with React Router

Using a React Router is how we can have multiple pages in a single-page application. With React, we typically handle URL routing with something called a router that keeps our UI in sync with the URL. Because we're not actually changing pages, the router will take care of rendering out components into the DOM based on the current URL.

Passing Data with Props

When you need to pass data from one component to another, you can pass it down as a prop. A prop can be passed down like a function parameter. Once a prop is passed down into a component, you can now use that prop anywhere in the child component. Props can be passed down multiple layers if needed. The term for this is called "prop drilling." Prop drilling can get messy, so we'll talk about some solutions to this in a minute.

Managing Component State

State is simply a JavaScript object used to represent information in or about a particular component. Traditionally, we used class-based components to set our state and its values, but more modernly, we use React Hooks like useState to create a component's state.

For instance, if we have a list of notes to render, we can set an initial state and then map through that state to output the data in our component. We can also update our state. For example, we can set an initial state as an empty array, then request some data from an API and update that state with the new data.

const [notes, setNotes] = useState([]);

useEffect(() => {
  fetch('/api/notes')
    .then(response => response.json())
    .then(data => setNotes(data));
}, []);

This state update will trigger our component lifecycle, which we'll talk about next.

The Component Lifecycle

Understanding the component lifecycle is a must for every React developer and is probably one of the most common interview questions for junior developers. A React component has a lifecycle that it goes through, and there are three main phases in this lifecycle: - Mounting: When it's first being added to the DOM. - Updating: When we are modifying something and that component needs to update. - Unmounting: When this component will be removed from the DOM.

With class components, we have three corresponding methods: componentDidMount, componentDidUpdate, and componentWillUnmount. With functional components, however, we use a Hook called useEffect that allows us to work with each part of a component's lifecycle.

Introducing React Hooks

React Hooks only apply to functional components, but due to the popularity of using function-based components, Hooks have become essential to learn. Hooks let us add state and other features without using class-based components. Before Hooks, functional components could not hold any state. Hooks are simply functions that allow us to "hook into" and manage state.

The two most common hooks you'll likely use when you first start are useState, which lets you set and update state in a component, and useEffect, which allows you to manage the component lifecycle. React gives us a whole list of built-in hooks, along with the ability to create our own custom hooks.

Advanced State Management

While we can create and manage state inside individual components, there will likely be a time when we need some form of global state to make data available across multiple components. Think of something like holding data for a logged-in user. You may need this user data across multiple components, like your header bar or a profile component, and passing this data down through props may not be practical, especially when this information is updated somewhere inside those components.

We have several options to handle this, such as using the built-in Context API or a third-party package like Redux, among numerous other solutions. With these, we are able to create some form of global state and use it across multiple components in our component tree without having to deal with prop drilling.

The Virtual DOM

At some point in the process of learning React, you will want to have an understanding of how the virtual DOM works. Understanding this will help you make sense of how React builds and updates our DOM and the complete lifecycle of a React component. In short, React creates something called a "virtual DOM," which is a virtual representation of the real DOM. When we're updating our components, we're actually updating the virtual DOM, not the real DOM. Using this method, React can find the most efficient way to update the real DOM by updating only areas where changes have been made, without having to update the entire DOM.

The Importance of the key Prop

When it comes to rendering a list of data in your components, one crucial thing you should be aware of is the key prop. Each item in a dynamically rendered list should contain the key prop; otherwise, you'll get an annoying error in the console. This prop should be unique and helps React identify which items have been changed, added, or removed, so React knows which part of the virtual DOM to update.

Handling Events

Handling events with React is very similar to how we would do this in traditional JavaScript, with a few syntactical differences. In React, we camelCase event names, and we pass the function we want to call directly inline between two curly braces, so there is no need for methods like addEventListener.

Controlled Components: Handling Forms

How we handle forms in React is a little different from the traditional method because we aim to keep all our information in some form of state inside our component. HTML elements such as <input>, <textarea>, and <select> typically maintain their own state and update based on a user's input. With React, however, we typically add event listeners to each field and update our component state whenever any one of these inputs change. Methods like onChange and onSubmit would directly update our state and be controlled by our own functions, instead of letting the form handle this on its own.

Conditional Rendering

There is always a chance that you will need to render some content conditionally depending on other values inside your application. Think of something like a user's name inside of a navigation bar. Depending on the user's authentication status, you will either display the user's name or display nothing.

One way we can handle this is by using the logical && operator. We can also use the inline if-else conditional (ternary) operator if we want to add more complex logic.

Example with &&: jsx {isLoggedIn && <p>Welcome, User!</p>}

Example with ternary operator: jsx {isLoggedIn ? <p>Welcome, User!</p> : <p>Please log in.</p>}

Common CLI Commands

There are three main commands worth mentioning because these are commands you will use in almost every project: - npx create-react-app my-app: This command creates the boilerplate files for a new React application. - npm start: This command starts up the development server so you can view your project right away. - npm run build: This command builds a directory for a production-ready version of your app for deployment.