Introduction to React

New to React? Start here.

What Is It?

React is a JavaScript library for building user interfaces. It’s known for being:


React is a “just” a JavaScript font-end library. You absolutely need to be familiar with HTML, CSS, and JavaScript before React will make any sense.

A First Code-Along

The simplest way to get started with React is to use a cloud platform like Replit or CodeSandbox. We’ll use CodeSandbox as it looks a lot like VSCode and it has awesome live coding support. Head over to, make yourself an account, and create yourself a new React app (with one click).

You can find existing React apps at CodeSandbox and fork them. Fork my my little counter demo. Here is the entire app:

We are going to actually build this app in class, learning basic React principles along the way! Here is our approach:

Can I use CodeSandbox for large applications?

Probably not. However, you can always use it to try things out while learning and experimenting, because live execution is just wonderful. For small apps, sure: CodeSandbox will even host your apps, making them available to the world.

Exercise: Riff off my counter app, adding new features or changing up the CSS. Make a note of the deployed URL, and get a friend to run your app from their own computer.

A Second Code-Along

Our second code-along will end up with this app, which uses the free Poké API to display an image, and the moves of a Pokémon whose name you type into a text field. Because we are using an API, we’ll introduce the useEffect hook. To minimize the number of calls to the API, we’ll invoke the API only when a button is pressed.

Our plan for the code-along will be:

In this code-along, we connected to an external API. There is a ton of stuff to know about APIs, including some details of HTTP and RESTful architectures, and how the built-in function fetch works. I have notes about APIs that we will cover later in the course, but feel free to check out now.

An Aside: React Right In The Browser

This is just fun to know, but important as well. We know React is just a JavaScript library, so we could just drop it in to an HTML page, right? Of course! It is done like this:

    <title>Hello React</title>
    <script crossorigin src=""></script>
    <script crossorigin src=""></script>
    <script src=""></script>
    <h1>A Message</h1>
    <div id="greeting"></div>
    <script type="text/babel">
      function Hello({ name }) {
        return <p>Hello, {name}</p>
      ReactDOM.render(<Hello name="you" />, document.getElementById('greeting'))

Of course, this doesn’t scale at all! Not at all! It’s great to know that it is possible, though.

What’s Next

Building on the cloud is fun and a great way to learn. But it’s also good to know how to build on your own machine, like the pros. That’s next.


We’ve covered:

  • What React is
  • Writing simple React apps in CodeSandbox
  • Basic concepts: components, state, and props
  • The effect hook for invoking web apis