- React is a <1> available at NPM
- As such, any project built with React will have the file <2> even though React is used to write front-end code
- A React project is built from separate <3> which keep the code compartmentalized
- It was created and is maintained by developers at <4>
- React uses a <5> to update the HTML DOM; your React code should not <6> the HTML DOM directly
- React attaches itself to the DOM through the <7> which is located in src/index.js
- All of the code related to components is contained with the <8> directory
- Components are <9> that share similarities with JavaScript <10> functions
- They must always
return
<11> - JSX stands for <12>
- It looks like <13> but it is not <14>
- Each element in JSX must have either a corresponding closing tag or <15> tag
- JSX can have only one <16> element; all others must be nested inside of it
- Components are exposed and consumed for use through <17> and <18> statements; this makes it quite easy to pass them around as needed
- Elements within JSX have <19>, short for properties, but they look like HTML attributes
- Some of them are actually identical to HTML attributes, such as <20>, but others are different, such as <21> instead of
class
- Unlike the functions you have learned about up until now, a component is not called but is <22> instead
- Rendering happens when the component is included within the <23> of another component
- The components form a tree whose root is contained within React's <24> method of the <25>
- Each component name in React must begin with <26> but the filename itself does not have to be <27>
- The extension of the filename can be .js or .jsx but <28> is preferred
- A component's
return
is not followed by any <29> or <30> that you have previously learned about - If the component returns a <31>, it is written on one line
return <p>Hello world</p>;
- However, a multi-line return needs <32>
return (
<div>
<p>Hello</p>
<p>world</p>
</div>
);
- a capital letter
- capitalized
className
- components
- data structure
- data type
- entry point
- entry point
export
- functions
- HTML
- HTML
id
import
- JavaScript XML
- .jsx
- JSX
- JSX
- library
- manipulate
- package.json
- parent
- parentheses
- props
- render
- render
- rendered
- self-closing
- shadow DOM
- single element
- src