React organises the code for a component into a single folder, and sometimes a single file. Everything that belongs to the component: styles, tests, etc, is in one place. This is a convention, not a requirement, but it’s a good one to follow.

There are many template languages. Some common ones are Handlebars, EJS, Jinja, Liquid, Go html/template and Twig. Once you understand one, the others are easier to pick up.

Often when you create a React app, you will want to fetch data from an API and display it inside your components. How do we do this in React?

You might think that we could just fetch the data in the component like this, but unfortunately it won’t work. Try it out in the CodeSandbox below.

This is because React is synchronous, while fetch is asynchronous. If we look in the console, we’ll see that the imgSrc will always be null when we try to render it. React will try to render before fetch has had time to get the data from the API.

So how do we fix this? We need to use a React hook called useEffect.

Let’s have a look at a more complex example. Here we will build a form for users to create a personal account. Make sure to select CreateAccountForm.js in the menu to you’re looking at the right part of the code.

We now have three different inputs named username, email and password. There is a corresponding state variable and change handler function for each value.

🧼 Inlining event handlers

We could make our code a bit shorter if we inlined our event handlers:

🧺 Centralising event handlers

Sometimes we need to put all of our update logic in one function. Maybe we need to validate the user’s input before we set it in state.

We can use a single handleChange function, that is reused to keep track of changes for all of the form fields. To be able to tell which <input> is being updated, we check the event.target.name field. This corresponds to the name attribute on the <input> (e.g. <input name="username">).

Based on this value, we then decide which state to update:

🧠 Think back to JS2 where you learned how to handle Events

🧠 Think back to your Components workshop.

We exported functions to use in other files using modules. You can export your React components in the same way. A React component is a function, so you can export it like any other function.

🧠 Think back to your filterFilms project.

We used <template> tags to store a plan of the HTML for our component. React uses a similar idea, but instead of <template> tags, it uses JSX.

🧠 Think back to your filterFilms project.

We used destructuring 🧶🧶 destructuring Destructuring unpacks values from arrays or objects into individual variables. to pull out the properties of an object and pass it to our createCard() function. React uses a similar idea.

You’ve learned how to build applications with React. The different applications and examples were all built on a single page. What if you wanted to have different pages? with each page having its own URL? You will need to introduce a router in your application.

In JavaScript, a router is the piece of code which is in charge of switching between views of your application and keep each view in sync with a specific URL. For example, you could imagine having a homepage reachable from the root path / and a users page with the path /users.

You can use a framework like Next.js or Remix, write this yourself, or use a library. In React, a popular library to help you achieve this is React Router.

Set a timer and stop working on this tutorial after 60 minutes. Write down your blockers and come to class with questions.

Here we return to control flow, that we learned about back in JS1. Search “conditionality” to remind yourself of the basics.

Here is our friend the map() function again! We can use it to render a list of items in React.

🧠 Search for “state” in the curriculum

Fun fact, you first met the concept of state in CYF Blocks

Effect here means “side effect”. We use the useEffect() hook to run code that has side effects, like fetching data from an API. We use these sparingly, because they can make our code harder to reason about.

In this module you are working in a team to build a React app. (You should have created your group already.)

Take this opportunity to work with your team on your React app. You can use this time to work on your app, to discuss your app with your team, ask questions and get help with blockers.

You can use any study group time to work on your product.

Vite is a build tool. It is the default build tool for Vue, SvelteKit, Preact and Solid. It is a common build tool for React and we will use it in this course.

In your terminal, run:

npm create vite@latest

And choose these options:

# Project name (you will need to type this):
react-vite
# Select a framework (use the Up/Down arrow keys to navigate):
React
# Select a variant (use the Up/Down arrow keys to navigate):
JavaScript + SWC

Change into the new directory and start the development server:

cd react-vite
npm install
npm run dev

React is a widely used JavaScript library for building user interfaces.

To write good React code, you must learn to think in React. Luckily for you, you have been learning JavaScript in a style🧶🧶 styleYou have been learning in a declarative and functional programming style that is very similar to React. You have built components. 🧶🧶 components. A component is a reusable, self-contained piece of code. Components are like lego blocks you can build websites with. You have built components that are functions. You have passed data into those functions. You have defined state objects. You have mapped over data and returned new arrays of components. You’ve practically learned React already! It’s like we planned this…

Let’s start by exploring React Learn, the official docs for React.

Modern web applications often involve interacting with forms such as creating an account, adding a blog post or posting a comment. We need to declare form inputs and get the values entered by users to do something with it (like display them on a page or send them in a POST request). So, how do we do this in React?

A popular pattern for building forms and collect user data is the controlled component pattern. A pattern is a repeated solution to a problem that is useful in multiple similar cases. Let’s have a look at an example:

We’re controlling the value of the input by using the value from the reminder state. This means that we can only change the value by updating the state. It is done using the onChange attribute and the handleChange function, called every time the input value changes. This happens when a new character is added or removed.

If we didn’t call setReminder in the handleChange function, then the input’s value would never change. It would appear as if you couldn’t type in the input!

Finally, the value we keep in the reminder state is displayed on the screen as today’s reminder.

(We could have also transformed the string before we set it with setReminder, by calling toUpperCase() on the string.)