React is a JavaScript library for building user interfaces. It’s known for being:
PrerequisitesReact 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.
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:
root
which is where the main component is going to gouseState
at a very basic levelonClick
attribute to the button, for now with an arrow function, and watch it work—awesome!setCounter
and not assign directly to counter
import
and export
work in JavaScriptCan 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.
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:
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”App
componentTitle
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
).App
component to hold the name of the Pokémon we want to displayInfo
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
.)pikachu
) to ensure the Info
component shows the nameEntry
component return an HTML form element and contain a single text field.content
) to track changes to the textfieldvalue
, which will be the content
state variable, and onChange
, a function to update the state variablesubmit
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 propname
changes, so we now add the effect hook, making a big deal about the second parameter of useEffect
!data
.encodeURIComponent
Info
component, get the image to displaykey
attribute (we’ll show the console warning if we don’t have it)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.
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.
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:
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.
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.
App
.count
? useState
hook: const [count, setCount] = useState(0)
.setCount
.useEffect
hook? onChange
or similar prop updating the state variable.event.preventDefault()
key
attribute in a list of components? fetch
.We’ve covered: