🧑🏾‍💻 prep

🔖
  1. What is React
  2. React is an interface
  3. Components
  4. Components are collections
  5. Importing and exporting
  6. Import everything at the top
  7. Syntactic sugar
  8. JSX
  9. Embedding JavaScript
  10. JSX eXtends JavaScript
  11. Props
  12. Props are like arguments
  13. Rendering
  14. Keys
  15. Codealong Playlist 📼
  16. Prep Resilience

🪄 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

React Learn

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.

Check your understanding

What is a React component? Like any component, a React component is a self-contained piece of code that can be reused in different places.
How do you make one? You write a JavaScript function that returns JSX.

Components are collections 🔗

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

🚢 Importing and Exporting

Learning Objectives

React Learn

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.

Check your understanding

Q: What are default and named exports in React? A: They are ways to export components from a file for use in other files.
Q: Why split components into different files? A: For better organization and to reuse components easily.

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

React Learn

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.

Check your understanding

Q: What is JSX in React? A: It's a mix of JavaScript and HTML used in React components.
Q: What are some rules for writing JSX? A: Wrap elements in a single root, close all tags, and use camelCase for attributes.

🐇 Embedding JavaScript

Learning Objectives

React Learn

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.

Check your understanding

Q: How do you use JavaScript in JSX? A: Use curly braces {} to include variables, functions, or objects.
Q: What is one use of curly braces in JSX? A: To include JavaScript variables or functions in JSX.

JSX eXtends JavaScript 🔗

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

📦 Props

Learning Objectives

React Learn

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.

Check your understanding

Q: What are props in React? A: Props are values passed from a parent component to a child component.
Q: How do you pass a prop to a component? A: Add the prop to the JSX tag of the child component.

Props are like arguments 🔗

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

👨🏼‍🎨 Rendering

Learning Objectives

React Learn

Complete 🧑🏾‍🎓 Conditional rendering

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

React Learn

Complete 🧑🏾‍🎓 Rendering lists

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

Check your understanding

Q: How do you render a list of components in React? A: Use JavaScript's map() method to create components from an array.
Q: What does conditional rendering mean in React? A: Use if statements, &&, or ? : operators in JSX.

🔑 Keys

Learning Objectives

React Learn

Complete 🧑🏾‍🎓 Keeping list items in order with key

Keys

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

Check your understanding

Q: Why are keys important in React's list rendering? A: Keys help React track and update list items efficiently.
Q: What should a key in a React list be like? A: A key should be stable, predictable, and unique for each list item.

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 (20 minutes)

The Secret to Building Resilience

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

Doing the right thing badly

🎯 Goal: Learn about doing the right thing badly instead of doing the wrong thing well. (20 minutes)

Read Failure, vulnerability, and the true nature of change. Reflect on whether you spend time in the “new thing badly” space.