React.js

Explain what is happening in the following crazy ass picture which is illustrating how the `.map` function works.

The `.map` function is a loop. It is being called on the `contacts` variable, which is an array that can be looped through. The `.map` function takes the `createCard` function as an argument. In this example, the `.map` function is using the `createCard` function as a basis for how to map out or assign the objects inside of the `contacts` array. In order for the `.map` function to work, it requires each object to have a unique `key`. In this example, we are using the `id` property of the `contacts` array, as the `key`. **NOTE** `key` is not a prop that can be called. It is a property that is required for the `.map` function to work. That is why we have the `id` prop, which also refers to the `id` property of the `contacts` array. Both the `key` and `id` refer to the same property of `contacts`, but we need `id` because `key` cannot be called on. That way, `{props.id}` is able to be called inside of the `Card` component.

How does the increase function work and what does it do to the count value in the following code snippet? function increase() { setCount(count + 1); }

The increase function updates the count value by calling the setCount function with the new value, which is the current count value plus 1: setCount(count + 1).

What is the initial value of count and how is it set in the following code snippet? const [count, setCount] = useState(0);

The initial value of count is 0, which is set by passing the value to the useState function: const [count, setCount] = useState(0).

what is the substring method used for?

The substring() method returns the part of the string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied.

What is the purpose of the useState function imported from the react library in the following code snippet? import React, { useState } from "react";

The useState function is a Hook that allows you to add state to functional components in React. It returns a stateful value (in this case, count) and a function to update it (in this case, setCount).

What is the term used to describe the "?grayscale" shown below. What does it do? <img alt = "random" src={img + "?grayscale}"}/>

This syntax denotes a query string. It tells the server to return a grayscale version of the image instead of a color version.

What is the find function used for?

To find the first item that matches from an array. It will not loop through an entire data set, it will stop once it finds a match.

True or false Hooks need to be used inside of functions

True

True or false The `useState` hook always returns two values. which are an array consisting of the initial state, and a function which allows us to update the initial state.

True

True or false: It is react.js convention to use pascal case (first letter of the word capitalized) when creating a react component. Example: function Heading() {};

True

True or false: Each .jsx file will only contain 1 component, and usually, there will be no HTML at all in the index.js file.

True As in the example shown in the picture. The index.js file will usually contain the App component, and nothing else. In this example, there is a Heading.jsx file, and a List.jsx file, each containing a component. Those components are imported into the App.jsx file, and a new component called App is created. Finally, App.jsx is imported into the index.jsx file, and the App component is rendered.

True or false: You can create a reusable component with html tags used in conjuction with props.

True.

True or false: You can only have one default export per file.

True.

True or false? classNames inside of JSX files must be camelCase.

True.

True or false, You can assign any variable name that you like when destructuring an array. For example, you could say: const animals = [{name: "cat", sound: "meow" }, {name: "dog", sound: "woof"}]; const [x, y] = animals;

True. Note: this cannot be done with objects. with objects you must use the key names of the objects that are being destructured.

What would be the syntax for importing everything from a module called math.js ? What is different about calling the components when you import a module this way?

Use an `*` and assign a name to the `*`. This is called a wild card. It is actually discouraged in style guides. Here we assign the name `pi` The difference is, when you import everything, you need to use the name that you assigned followed by a dot followed by the component you want to call.

What would we have to do if we wanted to assign different key names to the below object? const cat = { name: "cat", sound: "meow" }

We would have to call the initial keys of the object and assign them new names as we destructured the object like so. const cat = { name: "cat", sound: "meow" } const {name: catName, sound: catSound} = cat;

Using JSX, how would you insert the variable `myName` next to "Hello" into the following Div? ReactDOM.render( <div> <h1>Hello </h1> </div>, document.getElementById("root") );

Wrap it in curly braces. EX: ReactDOM.render( <div> <h1>Hello {myName}</h1> </div>, document.getElementById("root") );

Suppose you had the following index.js file. How would you call `pi`, `doublePi`, and `triplePi` inside of the <li></li>'s ? import React from "react"; import ReactDOM from "react-dom"; import pi, { doublePi, triplePi } from "./math.js"; ReactDOM.render( <ul> <li></li> <li></li> <li></li> </ul>, document.getElementById("root") );

`pi` does not have parentheses after because it is a constant, not a function. The other two are functions.

How does a JSX file "know" to interpret a line of code as javascript as opposed to HTML?

code that we wish to be interpreted as javascript is wrapped in curly braces.

Use the substring method to output the string `oz` from the string below. const str = 'Mozilla';

console.log(str.substring(1, 3)); // Expected output: "oz"

Use destructuring to assign the values of red, green, and blue respectively to the array below. const rgb = [9, 132, 227]

const [red, green, blue] = [9, 132, 227]

Destructure the below array. Store the cat object in a variable called `cat` store the dog object in a variable called dog; const animals = [{name: "cat", sound: "meow" }, {name: "dog", sound: "woof"}]

const animals = [{ {name: "cat", sound: "meow" }, {name: "dog", sound: "woof"}] const [cat, dog] = animals; Note: this is the same as saying: let cat = animals[0]; let dog = animals[1];

Consider the object below. It contains 2 key-value pairs and another nested object `feedingRequirements.` How would you extract the value of `food` from the nested object below using destructuring? Also log it. const cat = [ { name: "cat", sound: "meow", feedingRequirements: { food: 2, water: 3} },

const cat = [ { name: "cat", sound: "meow", feedingRequirements: { food: 2, water: 3} }, const {feedingRequirements: {food, water}} = cat; console.log(food) //2

Destructure the below object, into two variables called name and sound. const cat = { name: "cat", sound: "meow" }

const cat = { name: "cat", sound: "meow" } const {name, sound} = cat; Notice that we used curly braces to destructure an object as opposed to brackets to destructure an array.

In a JSX file, how would you create a variable called img that stores an image link, and then how would you use the variable (what is the syntax) when you actually wish to display the image?

const img = "https://picsum.photos/200"; then, call img inside of curly brackets in the file, where you'd like it displayed. <img alt = "random" src={img}/>

Use the find function to find the first number in the array > 10. Store the result in a variable called newNumber. var numbers = [3, 56, 2, 48, 5];

const newNumber = numbers.find(function (num) { return num > 10; })

Examine the array below. Use the findIndex function to loop through the array and return the index of the first number greater than 10. Store the result in a variable called newNumber. var numbers = [3, 56, 2, 48, 5];

const newNumber = numbers.findIndex(function (num) { return num > 10; })

Examine the array below. Use the reduce function to return the total sum of the numbers in the array below. Store this result in a variable called newNumber. var numbers = [3, 56, 2, 48, 5];

const newNumber = numbers.reduce(function (accumulator, currentNumber) { return accumulator + currentNumber; })

create a variable called newNumbers and set it equal to filter function that returns all of the numbers in the array below that are greater than 10. , 48, 5]; var numbers = [3, 56, 2, 48, 5];

const newNumbers = numbers.filter(function (num) { return num > 10; })

What is another way to write the below code using the && operator in react? currentTime > 12 ? <h1>Why are you still working</h1> : null

currentTime > 12 && <h1>Why are you still working?</h1> Because we don't want to render anything if the time is less than 12, we can use the && operator. The program checks to see if currentTime is > 12, if so, it executes the right side of the expression. Otherwise, it does nothing.

what do we need to import into our .jsx documents so that the compiler can read html and convert it?

import React from "react";

//Create a React app from scratch. //Show a single h1 that says "Good morning" if between midnight and 12PM. //or "Good Afternoon" if between 12PM and 6PM. //or "Good evening" if between 6PM and midnight. //Dynamically change the color of the h1 using inline css styles. //Morning = red, Afternoon = green, Night = blue.

import React from "react"; import ReactDOM from "react-dom"; const date = new Date(); const currentTime = date.getHours(); let greeting; const customStyle = { color: "" }; if (currentTime < 12) { greeting = "Good Morning"; customStyle.color = "red"; } else if (currentTime < 18) { greeting = "Good Afternoon"; customStyle.color = "green"; } else { greeting = "Good Night"; customStyle.color = "blue"; } ReactDOM.render( <h1 className="heading" style={customStyle}> {greeting} </h1>, document.getElementById("root") );

Import pi (which is the default) and `doublePi` and `triplePi` from a module called math.js

import pi, { doublePi, triplePi } from "./math.js";

After we add our dependencies, how do we use them in react?

import them at the top of the document. EX: import React from "react"; import ReactDOM from "react-dom";

How do we launch our live react application server?

in the terminal, cd to the directory that contains the react application. Then, npm start.

All props in react can be custom named, except one prop, which is reserved and used by the `map` function. What is that prop?

key

what is the terminal command for bundling your react app into a static app for production?

npm run build

terminal command for creating a react app is?

npx create-react-app `insert folder name, no quotes` this will create a new folder with the name that you specified. Usually this will be the application name you choose. This will auto generate a bunch of node modules, a public folder which contains an index.html, a src folder which contains app.js, index.css, and others. Also contains json files with all dependencies.

what is the terminal command for creating a react app called `my-app` and then running it?

npx create-react-app my-app cd my-app npm start

Below is the script source, which you'd find contained in an index.html file. What do you need to change in order to "tell" the browser it is reading a JSX file, not just a normal javascript file? (Ignoring the `$` signs which are there because me pasting the word script into quizlet is crashing it LOL). <$cript src="../src/index.js" type="text/javascript"></$cript>

<$cript src="../src/index.js" type="text/javascript"></$cript> change TO: <$cript src="../src/index.js" type="text/JSX"></$cript>

How do you assign a class name with javascript/JSX to the below h1? <h1>My Favourite Foods</h1>

<h1 className="heading">My Favourite Foods</h1>

What is react.js?

A javascript library created by facebook in order to simplify creation of user interfaces.

Where can we go to see best practices / naming conventions, etc. for react / jsx?

Airbnb React/JSX Style Guide

How do you style a JSX file?

Assign the elements that you wish to style inside the JSX file, a `className`, then call it inside of a css style sheet and apply styles there.

What is the command to stop the react live server?

CTRL + C

Fill in the blank: _____________ programming in React is a coding style where you define the desired UI state and let the framework handle the underlying implementation. It emphasizes expressing "what" to do, rather than "how," making code more readable and maintainable.

Declarative

Fill in the blank: Declarative programming in React is like using a GPS navigation system. You input your destination (_____________) and the GPS (____________) figures out the best route and directions (implementation details) to get you there, without you needing to know each turn explicitly.

Desired UI State React

True or false, You can assign any variable name that you like when destructuring an object. For example, we could say: const cat = { name: "cat", sound: "meow" } const {x, y} = cat;

False When destructuring an object, you must use the key names of the object to break it down. like so: const cat = { name: "cat", sound: "meow" } const {name, sound} = cat;

What is functional programming? Give an example?

Functional programming is basically, creating a function that expects another function to be passed to it, and so on. Map components are examples of functional programming.

How what is the main difference between HTML attributes and react.js props?

HTML attributes are pre-defined. You can't make them up, they have specific names, such as `class`, `value`, `id`, `src`, etc. For example <input value ="enter your name"></input> Where `value` is the attribute. react.js props are custom attributes that we create. They are not pre-defined. They look as follows. Instead of `name` for example, we could have used any word we wanted. <Card name="Beyonce" img="https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg" tel="+123 456 789" email="[email protected]" /> name, img, tel, and email are all `props` of a JSX function called `Card` See picture. In this way, we are able to re-use the `Card` function and assign different values to the props.

Fill in the blanks ___________ are a feature in React that allows functional components to access ___________________ methods previously limited to class components. They enable a more ____________ and modular programming style, simplifying code while keeping related logic together in a reusable and composable manner.

Hooks state and lifecycle functional

I don't even know what I'm trying to show here. You've got the `card` component which contains both the `avatar` and `detail` components. Within the `detail`component, you have the `detailInfo` prop, which is can be assigned whatever parameter we want. In this case, {props.tel} and {props.email}. Not sure why this is so hard for me to understand. But I might need to stare at it a while.

I don't even know what I'm trying to show here. You've got the `card` component which contains both the `avatar` and `detail` components. Within the `detail`component, you have the `detailInfo` prop, which is can be assigned whatever parameter we want. In this case, {props.tel} and {props.email}. Not sure why this is so hard for me to understand. But I might need to stare at it a while.

Fill in the blank: ___________ programming in React involves explicitly defining step-by-step instructions to manipulate _____________. It focuses on the "how" to achieve a goal, requiring more manual control and typically resulting in less ___________ and ____________ code compared to the _______________ approach in React.

Imperative UI elements readable maintainable declarative.

What is the purpose of the `.filter` function? What does it do?

It loops through a set of data and returns only the items that meet the given condition. In other words only the items that are true.

What is the findIndex function used for?

It loops through an array and stops once it finds the first number that matches the condition.

How is JSX able to allow us to write HTML in a javascript doc?

It uses Babel, which is a javascript compiler. Babel looks at the HTML inside of our javascript doc, and compiles it into vanilla javascript behind the scenes. Babel also compiles/converts next-gen javascript code into vanilla javascript that any browser can read.

What is JSX?

JSX is a syntax extension for JavaScript that is commonly used with React.js. Stands for JavaScript XML. Allows you to write HTML inside of a javascript doc, and then write javascript inside of that HTML.

Could we destructure the below object and assign it new value names like below? const cat = { name: "cat", sound: "meow" } const {name = "Fluffy", sound = "Purr"} = cat;

No. But, if we deleted the data from the name and sound property of the cat object, or they were undefined already, then yes, we could do that.

It is generally recommended to use class based, CSS styling for elements in react/JSX files. But inline styling is an option. Create a variable for a JSX doc called customStyle. Have it contain the following styles: color: red, font size: 20px, and border: 1px solid black. then use the variable inside of an h1 that says "hello world", to style the text.

Note that the styling syntax inside the variable is very similar to CSS, but with key differences. "" quotes are used around style value, and this isn't necessary in CSS. Also, commas are used after the style values instead of semi-colons. Also, camelCase is used for style properties instead of kebab-case used in CSS.

How many HTML elements can be stored inside of the ReactDom.render(); function?

Only 1. But... Multiple child elements can be wrapped inside of a single div. EX: ReactDOM.render( <div> <h1>Hello World</h1> <p>This is a paragraph</p> </div>, document.getElementById("root"));

After we have imported all of our component functions from our various .jsx files, into our App.jsx file, how do we call them inside of the app function? NOTE: DO NOT CONFUSE THIS WITH CALLING IMPORTED MODULES FROM .JS files. Syntax is different!!!

REMEMBER if these items were called from .js modules instead of the .jsx files like the ones shown in the picture, it would look like this: function App () { return <div> {Header();} {Footer();} {Title();} </div>; } Also, the components would be camelCase instead of PascalCase.

What is inside of the parenthesis of the ReactDOM.render(); function?

ReactDOM.render(WHAT TO SHOW, WHERE TO SHOW it.) EX: ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));