3e:null 3f:["$","title",null,{"children":"React: JSX, Components and Props | Ben M | Observable"}] 45:T1666,# React: JSX, Components and Props I'll be working from the [Code Sandbox Starter Template](https://codesandbox.io/s/new) for this lecture. You can code along in your own starter template, and I'll share this when it is done. Code Sandbox and your assignments have pre-built React setups. ## This is your introduction importing and exporting in JavaScript. Most programming languages out of the box use some kind of import/include process where to add additional code. This functionality used to not available to JavaScript, and we had to just hope things were loaded in the correct order, such as the Leaflet demo magically making an `L` variable available to JavaScript because we added some tags to `` in index.html. In modern JavaScript applications, we import the resources needed in each file. ## React breaks HTML down into smaller chunks called components No giant index.html to deal with. React components are functions that return specific markup. While there *can* be multiple components in a file, we will be following the fairly standard practice of giving each component its own file. ## We will be using function components, which were introduced a few years ago as an alternative to React class components. Function components can do everything a class component can, but tend to be easier to learn. If you are looking up solution online and see components that include `extends React.Component` or `extends Component`, the component is built in a way we won't be covering. See the readings in Canvas for more info. ### Basic Component template ```JavaScript // ComponentName.js const ComponentName = (props) => { return

Hello World

} export default ComponentName; ``` The file, function name and export don't technically *HAVE* to all be called `ComponentName` but it's really confusing if it isn't. - Components need to **begin with capital letters** so React can distinguish them from regular html tags. - The "export" makes it possible for other React components to use them. - The `props` function parameter (more on that later) is not always needed, but it's needed often - The markup it returns is in a format called JSX. You can use a mixture of React components and (almost) regular HTML. When using HTML the major differences to keep in mind - The `class` attribute should be changed to `className` because `class` is already a reserved term in JavaScript - Attribute names are camelCased, so something like `aria-hidden` should be added as `ariaHidden`. ### The markup returned by a component can be a mix of html and other components Capitalization is what makes them distinguishable. ```JavaScript // MixedComponentName.js import ComponentName from './components/MixedComponentName' const MixedComponentName = (props) => { return

Hello City, also

} export default MixedComponentName; ``` - Notice that we are importing `ComponentName` in order to use it in `MixedComponentName` ### If you have more than one line of markup, wrap in parentheses ```JavaScript // ComponentParen.js const ComponentParen = () => { const someWord = 'WORLD!'; return (

Hello {someWord}

) } export default ComponentParen; ``` ##JSX Needs to return a single parent. If you have items you would rather be adjacent, use Fragments ( <> ) ```JavaScript // ComponentFragment.js const ComponentFragment = () => { return ( <>

Hello dudes

Me Paragraph!

) } export default ComponentFragment; ``` ## You can 'inject' JavaScript into the JSX markup. Just use curly braces to put it right into markup. ```JavaScript // ComponentSomeWord.js const ComponentSomeWord = () => { const someWord = 'WORLD!'; return

Hello {someWord}

} export default ComponentSomeWord; ``` Or a function that returns something ```JavaScript // ComponentSomeMath.js const ComponentSomeMath = () => { const mathProblem = (num1, num2) => { return num1 + num2 * num2 } return

Hello {mathProblem(5,9)}

} export default ComponentSomeMath; ``` Ternary operators are handy for things with two states ```JavaScript // ComponentTernary.js const ComponentTernary = () => { isLoading = true; return

Hello {isLoading ? 'Please wait' : 'Your stuff is all here'}

} export default ComponentTernary; ``` ## Component functions have a "props" argument that lets you pass content to them. ```JavaScript // NameTag.js const NameTag = (props) => { return (

FIRST NAME: {props.firstName}
LAST NAME: {props.lastName}
{props.quote}

) } export default NameTag; ``` And you can pass props similar to how you'd set attributes. Using single quotes is preferred to quickly distinguish it from regular HTML. ```JavaScript ``` ## Components can be self closing or can have child elements So far all of our examples have been self closing, like the `
` or `` html tags. But we can also create components with children, so like html can have ```JavaScript

Hello World

``` A Component can do ```JavaScript Hello world ``` Use `props.children` to render what appears in between the component tags ```JavaScript // OpeningClosingComponent.js const OpeningClosingComponent = (props) => { return (

{title}
{props.children}
) } export default OpeningClosingComponent; ``` 46:[] 43:{"id":"469bc40d121de03d","slug":"react-jsx-components-and-props","title":"React: JSX, Components and Props","thumbnail":"1b41d41753ccff753203dd094a78ed67aa4d45433a8d90f6673834f53df17f85","access_level":"public","create_time":"$D2022-10-06T10:53:49.588Z","update_time":"$D2022-10-12T13:54:16.880Z","view_time":null,"first_public_time":"$D2022-10-06T10:59:45.187Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0181296cae5c789e","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":"starter_2024","bio":""},"version":11,"publish_version":11,"role":null,"authored":false,"authors":[{"type":"individual","id":"da731af43b5e1211","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":null,"bio":""}],"members":[{"type":"individual","id":"da731af43b5e1211","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"22cecf99ff09de42","slug":"si-579-f22","title":"SI 579 F22","owner":{"id":"0181296cae5c789e","login":"benm","name":"Ben M"}},"type":"notebook","body":{"titling":"auto","title":"React: JSX, Components and Props","cells":[{"id":0,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"