what is react?

¡Supera tus tareas y exámenes ahora con Quizwiz!

what is JSX

an optional syntax extension of JS

what is another way to think about components

building blocks that can be reused to make a webpage appear nice across the entire page

in React, UI are thought of and built in terms of ?

components

what does a basic JSX return function look like

const App = () => { return ( div <h1>I have spoken</h1> </div> ); }; "returns a div with a header element inside that says I have spoken"

JSX Rule: any one components return statement dealing with react, you can only return one thing from any component

for examples you could not return an h1 with an h3 sibling

JSX Rules: what is one of the rules needed to use JSX

import React from 'react';

what does reactDOM import look like

import ReactDOM from 'react-dom';

How do you use react?

in order to use React, we need to import and reference that library

JSX RULE: if a JSX expression is going to take up multiple lines what should you do?

it needed to be put inside of parenthesis inside of the return statement

when seeing JSX you should remember that?

its a component and is going to be rendering something into the DOM

what is an example of two header elements wrapped inside of a div element?

return ( <div> <h1 className="creed"> This is the way. </h1> <h3>I'm a Mandalorian. Weapons are part of my religion.</h3> </div> );

what is a fragment in React?

shorthanded way to insert div elements <> </> will allow h1 h3 elements to be inserted into the page without being wrapped

what are some uses of components

they are self contained pieces of UI and can be entered throughout your app OR building blocks

how do you display JSX on screen?

we need to use the render method built into ReactDOM. " also need to import reactDOM from react-dom node module

in order to return mutiple elements inside of the same return statement is to

wrap both inside a div element

if you have multiple div and do not want to add another thinking it will mess something up,

you can use fragments: React.fragment

React.createElement('h1', { className: 'creed' }, 'This is the way '); EXPLANIED

- React(use the library) - .createElement( method that takes the tag you want to make and object of various options any kind of attributes) - inner text of the tag