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.

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.

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

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.

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

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.