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:

Prerequisites

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. Head over to codesandbox.io, make yourself an account, and create yourself a new React app (with one click).

Here’s a little React app I made at CodeSandbox. We’ll be creating this from scratch in a code-along:

While we build this app from scratch in class, we’ll learn 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.

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:

helloreact.html
<html>
  <head>
    <title>Hello React</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/browse/babel-standalone@6.26.0/babel.min.js"></script>
  </head>
  <body>
    <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.querySelector('#greeting'))
    </script>
  </body>
</html>

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

Videos!

If you like videos, I made a little series that covers the basics.

The first shows how to build a super simple counter:

The second refactors the counter app to use React components instead of plain HTML elements:

In the third, we hit an API. But a super-simple API with no parameters:

This fourth shows how to use input elements in components. It hits the Poké API:

Next up is the iTunes API. This app does searches and displays results as a list. React requires items within lists and tables and similar things to have a key attribute. The reason that React needs these can be found in the React documentation; this video only shows how to make sure they are there:

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.

Recall Practice

Here are some questions useful for your spaced repetition learning. Many of the answers are not found on this page. Some will have popped up in lecture. Others will require you to do your own research.

  1. React is a ________________ for building ________________.
    JavaScript library; user interfaces.
  2. React is known for being all about ________________.
    components.
  3. React is known for being a framework emphasizing ________________ programming.
    declarative.
  4. What makes React super efficient?
    It uses a virtual DOM.
  5. React apps generally have top-level folders called public and src. What important file is in the public folder and what is this file for?
    index.html; it is the entry point for the app and contains an HTML element that React will populate.
  6. In addition to index.js, what other files go in the src folder?
    Components.
  7. What kind of JavaScript entity are React components?
    Functions.
  8. By convention the main component of a React app is called ________________.
    App.
  9. How does one define a state variable called count?
    With the useState hook: const [count, setCount] = useState(0).
  10. How do you “update” a state variable?
    You never assign to it directly but instead call the setter function, e.g., setCount.
  11. What are props?
    Props are parameters passed to components.
  12. What is one of the primary uses for the useEffect hook?
    Invoking web APIs.
  13. What is the traditional approach to managing user input elements like text fields in React?
    Using state variables to track the value of the input element, with its onChange or similar prop updating the state variable.
  14. Many React apps are “single-page” apps so form submission functions will generally include what statement?
    event.preventDefault()
  15. What is the purpose of the key attribute in a list of components?
    It helps React keep track of which components are which when they are updated.
  16. What JavaScript function is used to communicate with exeternal APIs?
    fetch.

Summary

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