React

What's a difference between a DOM object and a virtual DOM object?

A virtual DOM will update if ANY JSX element is rendered A virtual DOM updates much faster than regular DOM A virtual DOM can't directly affect HTML

React is fast

Apps made in React can handle complex updates and still feel quick and responsive.

T or F in React all lists need to have keys?

False

T or F for const h1 = <h1>Hello world</h1>; there needs to be parentheses

False. Typically yes if you have multiple lines of code but just for one you dont need it you can put it if you would like

React is modular

Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's

What's wrong with this code? Code let skateboardDog = ( <img src="alfie.jpg" /> <h1>Hiya kids! I'm a dog on a skateboard.</h1> );

JSX expressions need an outermost element let skateboardDog = ( <> <img src="alfie.jpg" /> <h1>Hiya kids! I'm a dog on a skateboard.</h1> </> );

JSX

Standing for JavaScript XML, it is a syntax extension for ECMAScript that allows you to write HTML/XML like code inside of JavaScript/React files.

React is scalable

Large programs that display a lot of changing data are where React performs best.

A list needs keys if either of the following is true:

The list items have memory from one render to the next. For instance, when a to-do list renders, each item must "remember" whether it was checked off. The items shouldn't get amnesia when they render. A list's order might be shuffled. For instance, a list of search results might be shuffled from one render to the next.

T or F. The computer actually computes const h1 = <h1>Hello world</h1>; as const h1 = React.createElement( "h1", null, "Hello world");

True!

React is popular

While this reason has admittedly little to do with React's quality, the truth is that understanding React will make you more employable.

React is flexible

You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore.

render jsx import React from 'react'; import { createRoot } from 'react-dom'; const container = document.getElementById('app'); const root = createRoot(container); const people = ['Rowe', 'Prevost', 'Gare']; const peopleList = people.map((person, i) => <li key={'person_' + i}>{person}</li> ); root.render(<ul>{peopleList}</ul>);

a page that returns row prevost gare

when you use jsx sometimes you will see app.js and app.compiled.js tell me the difference

app.js is where you write all your react/javascript code app.compiled.js takes that code and converts it to make it compatible with modern dayweb browsers using something like babel because modern web browsers dont always keep up with new react features

Place the following steps in the right order: a. Changes on the real DOM cause the screen to change. b. A JSX element renders. c. The virtual DOM is compared to what it looked like before it updated to figure out which objects have changed. d. The entire virtual DOM gets updated. e. The changed objects, and the changed objects only, get updated on the real DOM.P

b,d,c,e,a

create an h1 element in JSX/React named h1

const h1 = (<h1>Hello world</h1>); or const h1 = React.createElement( "h1", null, "Hello world");

lets say we are mapping through an object we want to get all the people and return it as a list with unique keys called person_1 person_2 etc. show me how to do this

const peopleList = people.map((person,i) => <li key={'person_' + i}>{person}</li> // expression goes here: );

Why React

fast modular scalable flexible popular

const h1 = React.createElement( "h1", null, "Hello world"); what is the null spot reserved for?

props