Introduction to React

What Is It?

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

• All about components
• A framework emphasizing declarative programming
• Really fast, because it uses a virtual DOM
• Super popular, used almost everywhere

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 and it has awesome live coding support. Head over to codesandbox.io, 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:

• Create a new React app in Code Sandbox
• Look over and describe the files that were made for us: package.json, public/index.html, src/index.js, src/App.js, src/styles.css
• Update the title in index.html
• Create a state variable for the count, explaining useState at a very basic level
• Display the value of the count on the page
• Change the initial value of the count variable and demonstrate that CodeSandbox shows it live
• Add an increment button, for now as a plain HTML element
• Add and onClick attribute to the button, for now with an arrow function, and watch it work—awesome!
• Explain that we must use setCounter and not assign directly to counter
• Emphasize the reactive nature of React: whenever the state variable changed, the display automatically updated
• Pull out the action for the button into its own named function—that’s cleaner, right?
• Add a decrement button and its associated action
• Now make a button component, explaining the difference between components and props
• Show how props can be declared as a single parameter AND how it can be done with destructuring—and explain destructuring in case anyone hasn’t see that before
• Move the button component into its own file, explaining how import and export work in JavaScript
• Add a reset button (that brings the counter to zero)
• Work on CSS, using this time in class to add in new styles and respond to student questions and/or suggestions

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.

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:

• Create a new React project at CodeSandbox
• Review the pre-built files: package.json, public/index.html, src/index.js, src/App.js, src/styles.css
• Update the title in index.html
• Create three empty-ish components: Title, Entry, and Info—each at first will just return a div with text such as “Title goes here”
• Put the components into the return value of the App component
• Parameterize the Title component with a (string) prop ("Poké Finder), just as a way to review props (make updates in the component and in its reference in App.
• Create a state variable in the App component to hold the name of the Pokémon we want to display
• Since we will want the Info component to display the picture and the moves of a pokemon, let’s parameterize the Info component with a name prop and have it simply display this value (make updates in the component itself and in its reference in App.)
• Enter an initial value for the name component (e.g., pikachu) to ensure the Info component shows the name
• Get fancy by making the info component say “Meet pikachu”
• Make the Entry component return an HTML form element and contain a single text field.
• Give the entry component a state variable (called content) to track changes to the textfield
• Add two attributes to the textfield: value, which will be the content state variable, and onChange, a function to update the state variable
• Submission of the form needs to update the app’s state variable with the content of the textfield as well as clearing the form field, and MOST IMPORTANTLY, NOT ACTUALLY SUBMIT THE FORM. So we will create a local function called submit which will prevent submission, invoke the action to set the app state variable name, and clear the text field (i.e., just setContent("")). To make this work, the setter for name must be passed in as a prop
• Test with various Pokémon names (and non-names too)
• Now we want to hit the API when the app state variable name changes, so we now add the effect hook, making a big deal about the second parameter of useEffect!
• The effect will update a new state variable for the API response, let’s call it data.
• Use a new browser tab (or POSTMAN) to explore the API responses for all kinds of weird inputs
• Get the url to be secure in the app by using encodeURIComponent
• In the Info component, get the image to display
• In the info component, let’s do some error handling
• Still in the info component, let’s get the moves rendered in an HTML list component, demonstrating the need for the key attribute (we’ll show the console warning if we don’t have it)
• CSS PARTY!

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:

<html>
  <head>
    <title>Hello React</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/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.getElementById('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.

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.

Summary