React in 19 minutes

From the history of React, to the Virtual DOM, and everything in between, let's cover it all.

What is React?
How does React work?
Why should you use React?
How do you use React?
Learn By Doing: A look at a simple React App
Conclusion

What is React?

Long, long, ago, in a galaxy far, far, away...Umm, no, that's not right. Let's try again. Before we can understand what React is, we need to understand why it was created in the first place.

The problem

Prior to React, web developers would use JavaScript to manipulate the DOM (Document Object Model) directly. This was a problem, because the DOM is slow. Really slow. And the more elements you have on the page, the slower it gets. This is because every time you make a change to the DOM, the browser has to recalculate the layout of the page, and repaint it. This is a very expensive operation, and can cause performance issues, especially on mobile devices. So, how do we solve this problem?

The solution

Facebook developed React while maintaining interfaces that had become difficult to update with its existing client-side tools.

A small team built a library where UI was expressed as components and recalculated from state. Facebook released React publicly in 2013.

At the time, many PHP applications handled an interaction by rendering another page on the server and sending it back. That round trip made highly interactive interfaces harder to build.

To overcome these obstacles, Facebook's developers aimed to shift the rendering process to the client-side. By doing so, the server would only need to send data to the client, and the client could handle the rendering locally. This approach drastically reduced the amount of data transfer and server-side processing, resulting in faster and more responsive user interfaces.

Facebook built React to make client-side interfaces easier to split into components and update as data changed. Its virtual DOM gave React a way to calculate which DOM updates were needed.

React's rise also coincided with Angular 2 introducing a difficult migration path from AngularJS. Some teams looking at alternatives chose React, and its adoption grew from there.

If you're interested in learning more about React's history and evolution, I recommend watching the React.js documentary which provides an in-depth exploration of React's origins and its impact on the development community.

How does React work?

React builds interfaces from components. A component can represent one button, a form, or an entire page, and components can contain other components. Here is the smallest useful example:

1const Button = () => {
2  return <button>Click Me!</button>;
3};

This component returns a button. Another component can render it like this:

1const App = () => {
2  return (
3    <div>
4      <Button />
5    </div>
6  );
7};

App composes the Button component instead of duplicating its markup.

When components are rendered, they return a piece of HTML called JSX. JSX is a syntax extension to JavaScript that allows you to write HTML inside of JavaScript. The great thing about JSX is that it's just JavaScript, so you can use all of the features of JavaScript inside of it. This makes it really easy to build user interfaces, because you don't have to learn a new language. You can just use JavaScript.

The Virtual DOM

Under the hood, React uses something called the Virtual DOM. The Virtual DOM is a representation of the DOM in memory. It's a JavaScript object that contains all of the elements on the page, and their properties. When you make a change to the DOM, React updates the Virtual DOM, and then compares it to the previous Virtual DOM. If there are any differences, React will update the DOM accordingly utilizing a technique called reconciliation.

Remember those demo components from above? In the virtual DOM, it would look something like this:

1const virtualDom = {
2  type: "div",
3  props: {},
4  children: [
5    {
6      type: "Button",
7      props: {},
8      children: [
9        {
10          type: "button",
11          props: {},
12          children: ["Click Me!"],
13        },
14      ],
15    },
16  ],
17};

The example is a JavaScript representation of the desired elements and props. React compares successive trees and commits the required DOM operations. That does not make every React application fast; component structure, state placement, and rendering work still matter.

CreateElement

React uses a function called createElement to create elements. This function takes three arguments: the type of element you want to create, the properties of the element, and the children of the element. Let's take a look at an example:

1const element = React.createElement("div", {}, "Hello World!");

Here, we've created a new element called element. It's a div element with no properties, and it has the text "Hello World!" as its children. This is how React creates elements.

JSX

As we mentioned earlier, JSX is a syntax extension to JavaScript that allows you to write HTML inside of JavaScript. Let's take a look at an example of it in action:

1const element = <div>Hello World!</div>;

This is the same element we created earlier, but this time we're using JSX instead of createElement. As you can see, JSX is a lot easier to read, and it's a lot easier to write. This is why most people prefer to use JSX over createElement when building their apps.

Class Components

Class components are another way to create components in React. They're a lot like regular components, but they have a few extra features that make them more useful for everyday use. Let's take a look at an example:

1class Button extends React.Component {
2  render() {
3    return <button>Click Me!</button>;
4  }
5}

Here, we've created a new class component called Button. It's a lot like our regular component, but it has a few extra features that make it more powerful. Let's take a look at what those features are:

State
Lifecycle Methods
Props

State

State stores data that belongs to a component and can trigger a render when it changes. Here's a simple class component:

1class Button extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      count: 0,
6    };
7  }
8
9  render() {
10    return <button>{this.state.count}</button>;
11  }
12}

Here, we've created a new class component called Button. It has a state property called count, which is set to 0. We can access this state property by using this.state.count. Whenever we update the state, React will automatically update the DOM with the new value. This is how React keeps track of changes in the DOM using the Virtual DOM we talked about earlier.

Lifecycle Methods

Lifecycle methods are methods that are called at certain points in the lifecycle of a component. Think of them as hooks/event handlers that allow you to run code at specific points in the lifecycle of a component.

1class Button extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = {
5      count: 0,
6    };
7  }
8
9  componentDidMount() {
10    console.log("Component Mounted!");
11  }
12
13  render() {
14    return <button>{this.state.count}</button>;
15  }
16}

Here, we've created the same class component as before, but this time we've added a lifecycle method called componentDidMount. This method is called when the component is mounted to the DOM. We can use this method to do things like fetch data from an API, or set up event listeners.

Props

Props are a way to pass data from one component to another. Since components are just functions, you can pass data to them as arguments. There's a few quirks to props, but they're essential in React's model.

1class App extends React.Component {
2  render() {
3    return <Button text="Click Me!" />;
4  }
5}
6
7class Button extends React.Component {
8  render() {
9    return <button>{this.props.text}</button>;
10  }
11}

Here, we've created a new class component called App. It has a child component called Button. We can pass data from the parent component to the child component by using props. In this case, we're passing the text "Click Me!" to the child component. We can access this data by using this.props.text. Props can be used to pass any type of data from one component to another. Functions, objects, arrays, etc.

Functional Components

Functional components are another way to create components in React. They're a lot like regular class components, but they are a lot simpler. Let's take a look at an example:

1const Button = () => {
2  return <button>Click Me!</button>;
3};

Here, we've created a new functional component called Button. It's a lot like our regular component, but it's a lot simpler. It doesn't have any state, lifecycle methods, or props. It's just a function that returns some JSX. This is how most people prefer to create their components in React, because it's a lot simpler to read and write.

Hooks

Remeber those lifecycle methods we talked about earlier? Well, they're not the only way to do things in React. There's another way called hooks. Hooks are a new feature in React that allow you to do things like fetch data from an API, or set up event listeners without using lifecycle methods. Let's take a look at an example:

1const Button = () => {
2  const [count, setCount] = React.useState(0);
3
4  return <button onClick={() => setCount(count + 1)}>{count}</button>;
5};

Here, we've created a new functional component called Button. It uses the useState hook to keep track of the count. Whenever the button is clicked, the count is incremented by one. The [count, setCount] is called a destructured array. It's a way to access the values returned by the useState hook. The first value is the current value of the state, and the second value is a function that allows you to update the state.

There's a lot more to hooks than this, but this is a good place to start. If you want to learn more about hooks, check out the official documentation on hooks.

Why should you use React?

Now that we know what React is, and how it works, let's take a look at why you should use it. There are a lot of reasons why you should use React, but here are a few of the most important ones:

React is popular

React is common in web-development job listings and is used by companies including Meta, Netflix, and Airbnb. It is useful to know, but it is not a prerequisite for every web role.

React batches and reconciles updates

React calculates a new element tree and commits the DOM changes needed to match it. That programming model can avoid unnecessary manual DOM work, but it does not guarantee good performance. React's render-and-commit documentation explains the actual lifecycle.

React is easy to learn

By knowing JavaScript, you already know React. There's no need to learn a new language. You can just use JavaScript to build your apps. With this in mind, it's a lot easier to learn React than other JavaScript libraries like Angular or Vue where they have their own syntactic sugar on top of JavaScript.

How do you use React?

Create React App was once the default teaching tool, but React deprecated it in 2025. For a small client-rendered exercise, Vite gives us a maintained development setup:

1npm create vite@latest my-app -- --template react

Here, we've created a new React app called my-app. This command will create a new directory called my-app with all of the files needed to get started with React. It will also install all of the dependencies needed to run the app.

Once the app has been created, you can run it by using the following command:

1cd my-app
2npm start

This starts Vite's development server, normally on http://localhost:5173.

For production applications, React's current project guidance recommends a framework that includes routing and data loading. A build tool such as Vite is still useful for learning, embedded clients, and applications whose architecture lives elsewhere.

Other popular ways to create a React app include:

Here's the getting started steps for Vite:

1npm create vite@latest

1cd my-app
2npm install
3npm run dev

Similar, but Vite runs on port 5173 by default. Additionally, Vite uses esbuild to bundle the JavaScript files, which is a lot faster than webpack.

Learn By Doing: Building a React App

Now that we know what React is, and how it works, let's take a look at how to build a simple React app. For this section, we're going to build a app that allows you to view cat photos in a gallery. Let's get started!

Step 1: Create a new React app

Create the example with Vite's React template:

1npm create vite@latest photo-gallery -- --template react
2cd photo-gallery
3npm install
4npm run dev

Now that we have the development server running, head over to App.js and delete all of the code in there. We're going to start from scratch.

When making React apps, I like to start from the bottom up. This means that I start with the smallest component, and then work my way up to the largest component. In my opinion, this is the best way to build React apps, because it allows you to focus on one thing at a time, rather than trying to do everything at once.

Step 2: Create PhotoCard component

The first thing we need to do is create our first component. We're going to call this component PhotoCard. Let's take a look at how to do that:

1import React from "react";
2import PropTypes from "prop-types";
3
4const PhotoCard = ({ title, url }) => {
5  return (
6    <div>
7      <h2>{title}</h2>
8      <img src={url} alt={title} />
9    </div>
10  );
11};
12
13PhotoCard.propTypes = {
14  title: PropTypes.string.isRequired,
15  url: PropTypes.string.isRequired,
16};
17
18export default PhotoCard;

Here, we've created a new component called PhotoCard. It takes two props: title and url. We can access these props by using props.title and props.url (or destructuring, like seen above). We're going to use these props to display the title and the image of the photo card. The PropTypes library is used to validate the props that are passed to the component. This is a requirement in React, but generally speaking, you should always validate the props that are passed to your components in order to prevent bugs.

We want to create a gallery of photo cards, so we need to create a new component for each photo card. What we're going to do is create a new component called PhotoGallery that will render a list of photo cards and make that easier. Let's take a look at how to do that:

1import React from "react";
2import PhotoCard from "./PhotoCard";
3
4const getCatPhotos = () => {
5  const promises = [];
6  for (let i = 0; i < 10; i++) {
7    promises.push(
8      fetch("https://api.thecatapi.com/v1/images/search")
9        .then((res) => res.json())
10        .then((data) => data[0])
11    );
12  }
13  return Promise.all(promises);
14};
15
16const PhotoGallery = () => {
17  const [photos, setPhotos] = React.useState([]);
18
19  React.useEffect(() => {
20    getCatPhotos().then((photos) => setPhotos(photos));
21  }, []);
22
23  return (
24    <div>
25      {photos.map((photo) => (
26        <PhotoCard key={photo.id} title={photo.title} url={photo.url} />
27      ))}
28    </div>
29  );
30};

Yeah, I know, that's a lot of code. Let's break it down. First, we're importing the PhotoCard component from the PhotoCard.js file. Then, we're creating a function called getCatPhotos that will fetch 10 random cat photos from the Cat API. We're using the built-in fetch function to do this. The fetch function returns a promise, so we need to use the then method to get the data from the promise. We're also using the Promise.all method to wait for all of the promises to resolve before returning the data. This is a very common pattern in React, so it's important to understand how it's being applied here.

After we've fetched the photos, we're using the useEffect hook to set the state of the photos variable to the photos we fetched. The useEffect hook is a way to run code after the component has been rendered. We're using it here to fetch the photos after the component has been rendered and set the state of the photos variable to the photos we fetched. Once the state has been set, React will automatically update the DOM with the new data.

Finally, we're rendering a list of photo cards using the map method. The map method is a way to iterate over an array and return a new array. We're using it here to render a list of photo cards. We're also using the key prop to give each photo card a unique key. Generally speaking, you should always give each element in a list a "unique" key to prevent bugs.

Step 3: Create PhotoGallery component

Now that we have a component that renders a list of photo cards, we need to create a component that will render the photo gallery. We're going to call this component Main. Let's take a look at how to do that:

1import React from "react";
2import PhotoGallery from "./PhotoGallery";
3
4const Main = () => {
5  return (
6    <div>
7      <h1>Photo Gallery</h1>
8      <PhotoGallery />
9    </div>
10  );
11};
12
13export default Main;

That's it! We've created a new component called Main that renders the photo gallery. We're going to use this component in our App component. Let's take a look at how to do that:

1import React from "react";
2import Main from "./Main";
3
4const App = () => {
5  return (
6    <div>
7      <Main />
8    </div>
9  );
10};
11
12export default App;

Now that we have our App component, we can render it in our index.js file. Let's take a look at how to do that:

1import React from "react";
2import ReactDOM from "react-dom";
3import App from "./App";
4
5ReactDOM.render(React.createElement(App), document.getElementById("root"));
6// or ReactDOM.render(<App />, document.getElementById("root"));

React uses the ReactDOM.render method to render the App component to the DOM. We're using the document.getElementById method to get the root element from the DOM. This is where we want to render our app. We're also using the React.createElement method to create the App component. This is a requirement in React, but generally speaking, you should always use JSX instead of React.createElement.

Now that we've created our app, let's take a look at what it looks like in the browser:

As you can see, we've successfully created a photo gallery using React! It's not the prettiest photo gallery in the world, but the goal of this article was to teach you how to build a React app, not how to build a beautiful photo gallery.

Full Code:

1import React from "react";
2import PropTypes from "prop-types";
3
4PhotoCard.propTypes = {
5  title: PropTypes.string.isRequired,
6  url: PropTypes.string.isRequired,
7};
8
9const PhotoCard = ({ title, url }) => {
10  return (
11    <div>
12      <h2>{title}</h2>
13      <img src={url} alt={title} />
14    </div>
15  );
16};
17
18const getCatPhotos = () => {
19  const promises = [];
20  for (let i = 0; i < 10; i++) {
21    promises.push(
22      fetch("https://api.thecatapi.com/v1/images/search")
23        .then((res) => res.json())
24        .then((data) => data[0])
25    );
26  }
27  return Promise.all(promises);
28};
29
30const PhotoGallery = () => {
31  const [photos, setPhotos] = React.useState([]);
32
33  React.useEffect(() => {
34    getCatPhotos().then((photos) => setPhotos(photos));
35  }, []);
36
37  return (
38    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }}>
39      {photos.map((photo) => (
40        <PhotoCard key={photo.id} title={photo.title} url={photo.url} />
41      ))}
42    </div>
43  );
44};
45
46function App() {
47  return (
48    <div>
49      <PhotoGallery />
50    </div>
51  );
52}
53
54export default App;

React has been my favorite JavaScript library for a long time now, and I hope that this ramble has helped you understand why. User interfaces are a huge part of our lives, and React makes that so much easier.

I hope you've enjoyed this and maybe even learned something new. If you have any questions, feel free to reach out to me on Discord @nyumat. I'm always happy to chat!