πŸ§‘πŸΎβ€πŸ’» prep

πŸͺ„ What is React

Learning Objectives

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 🧢 🧢 style You 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 is an interface πŸ”—

React is an interface
React is a user interface library. Picture by Maggie Appleton

🧩 Components

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Your first component

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.

question

Components are collections πŸ”—

Components are collections
Components are reusable collections of elements. ~ Maggie Appleton

🚒 Importing and Exporting

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Importing and exporting components

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

question

Import everything at the top πŸ”—

Import everything at the top
Get everything you need at the top of the file. Picture by Maggie Appleton

Syntactic sugar πŸ”—

Syntactic sugar
React is mostly vanilla JavaScript. Picture by Maggie Appleton

🍬 JSX syntactic sugar

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Writing markup with jsx

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

question

πŸ‡ Embedding JavaScript

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ JavaScript in JSX with Curly Braces

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.

question

JSX eXtends JavaScript πŸ”—

JSX eXtends JavaScript
Templating languages make dynamic HTML. Picture by Maggie Appleton

πŸ“¦ Props

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Passing props to a component

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

question

Props are like arguments πŸ”—

Props are like arguments
Props carry data into components. Picture by Maggie Appleton

πŸ‘¨πŸΌβ€πŸŽ¨ Rendering

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Conditional rendering

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

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Rendering lists

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

question

πŸ”‘ Keys

Learning Objectives

narrative

Complete πŸ§‘πŸΎβ€πŸŽ“ Keeping list items in order with key

⚠️ warning

JSX elements directly inside a map() call always need keys!

question

Prep Resilience

Learning Objectives

Introduction

Learn background information about techniques to help yourself deal with adversity.

10 Ways to Build and Develop Resilience

🎯 Goal: Learn some practical techniques (10 minutes)

Watch the video 10 Ways to Build and Develop Resilience.

Protective Factors

🎯 Goal: Learn some practical techniques (30 minutes)

The Secret to Building Resilience

🎯 Goal: Learn an interesting perspective about your network of friends. (30 minutes)