216124, 3:13 PM Lear React: React Components Cheatsheet | Codecademy Cheatsheets / Learn React [codelcademy React Components return statement React function components must contain a return f 1 MyComponent () statement. This should return some React elements ‘ereated with JS. Function Component Base React function components follow regular JavaScript f , ‘lass syntax in declaration and returns JSX elements. This example shows a simple React function component, Importing React In order to use React, we must frst import the React, sor . library. When we import the library it creates an object that contains properties needed to make React work, including JSX and creating custom components. hips www. codecademy comearnreact-101/modulesilearn-react-componentsicheatsheet 15216124, 3:13 PM Leam Reset: React Components ‘A React component isa reusable piece of code used to define the appearance, behavior, and state of a portion of 1 web app's interface. Components are defined as functions. Using the component as a factory, an infinite number of component instances can be created. JSX Capitalization React requires thatthe first letter of components be capitalized. JSX will use this capitalization to tell the ifference between an HTML tag and a component instance. I the first letter of a name is capitalized, then ISK knows its @ component instance; if not, then i's an HTML element. React Components Cheatsheet | Codacademy n MyFunctionConp // This is considered a TML tag. hitnsww.codecademy/comearnreact-101/modulesilearn-react-componentsicheatsheet 218216124, 3:13 PM Importing and Exporting Components in React React components can be modulaly structured and made reusable by placing them into their own fles. Components can be exported and imported into a top= level fle and rendered In Appi Greeting! Rendering a Component ‘A React function component can be rendered by creating 1 root container and rendering the component into the root container. Lear React: React Components Cheatsheet | Codecademy [codelcademy Component to be rendered function MyComponent () //Rendering the component createRoot ( getElement! ‘app") hitnsww.codecademy/comearnreact-101/modulesilearn-react-componentsicheatsheet 38216124, 3:13 PM Lear React: React Components Cheatsheet | Codecademy Multi-line JSX Expressions Parentheses are used when writing @ multi-line JSX born ‘expression. In the example, we see that the component's Tetum statement is spit over multiple Ines, Therefore it is wrapped in parentheses. “https: //en.wikipedia.org/wiki/ a Gandhi" Logic Before return ‘AReact component can contain JavaScript before any f ISKis returned. The JavaScript before the return statement informs any logic necessary to render the ‘component, round ( Inthe example code, we see JavaScript prior to the relum statement which rounds the value to an integer. hitnsww.codecademy/comearnreact-101/modulesilearn-react-componentsicheatsheet 48216124, 3:13 PM Leam Reset: Object Properties As Attribute Values In React, SX attribute values can be set through data stored in regular JavaSeript objects. We see this in the ‘example block of code. In our code example we first see our JavaScript object seaAnemones and the values stored with this image. We then see how these stored values are used to set the attributes in our JSX expression for the SeaAnemones component. Print 8 Share v React Components Cheatsheet | Codacademy [codelcademy ommons .wikimedia.org/wiki/Catege teps:// 0429. Images#/media/Pile:Anemon px, hitnsww.codecademy/comearnreact-101/modulesilearn-react-componentsicheatsheet 55