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. 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:

• 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
• Make updates to package.json as needed
• Update the title in index.html
• Note how the body in public/index.html has a div with the id root which is where the main component is going to go
• Note the contents of the file indicated as the main file in package.json, namely src/index.js, is set up
• Describe the component defined in src/App.js
• 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 an 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. But get this! If you want to create a new React project at CodeSandbox completely from scratch, just type react.new into your browser’s address bar!
• Review the pre-built files: package.json, public/index.html, src/index.js, src/App.js, src/styles.css
• Make updates to package.json as needed
• 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,” “Entry form goes here,” and “Info 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 (this requires making 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 (by making 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.

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@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