Scribd
Upload
16 views4 pages

Learn React - React Components Cheatsheet - Codecademy

The document provides a comprehensive guide on React components, including their structure, syntax, and how to import and export them. It explains the importance of capitalization in JSX, rendering components, and using JavaScript logic before the return statement. Additionally, it covers how to use object properties as attribute values in JSX expressions.

Uploaded by

thenishx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views4 pages

Learn React - React Components Cheatsheet - Codecademy

The document provides a comprehensive guide on React components, including their structure, syntax, and how to import and export them. It explains the importance of capitalization in JSX, rendering components, and using JavaScript logic before the return statement. Additionally, it covers how to use object properties as attribute values in JSX expressions.

Uploaded by

thenishx
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Cheatsheets / Learn React

React Components

return statement
React function components must contain a return function MyComponent() {
statement. This should return some React elements
return <h1>Hello from MyComponent!
created with JSX.
</h1>;
}

Function Component Base


React function components follow regular JavaScript function MyComponent() {
class syntax in declaration and returns JSX elements.
return <h1>Hello world!</h1>;
This example shows a simple React function
component. }

Importing React
In order to use React, we must first import the React import React from 'react';
library. When we import the library, it creates an object
that contains properties needed to make React work,
including JSX and creating custom components.

React Components
A React component is a reusable piece of code used to import React from 'react';
define the appearance, behavior, and state of a portion
of a web app’s interface. Components are defined as
functions. Using the component as a factory, an infinite function MyFunctionComponent() {
number of component instances can be created. return <h1>Hello from a function
component!</h1>;
}

class MyClassComponent extends


React.Component {
render() {
return <h1>Hello from a class
component!</h1>;
}
}
JSX Capitalization
React requires that the first letter of components be // This is considered a component by
capitalized. JSX will use this capitalization to tell the
React.
difference between an HTML tag and a component
instance. If the first letter of a name is capitalized, then <ThisComponent />
JSX knows it’s a component instance; if not, then it’s an
HTML element.
// This is considered a JSX HTML tag.
<div>

Importing and Exporting Components in React


React components can be modularly structured and
made reusable by placing them into their own files.
Components can be exported and imported into a top-
level file and rendered.
In Greeting.js:

function Greeting() {
return (
<>
<h1>Hello, welcome to...</h
<h2>Learn React!</h2>
</>
);
}

export default Greeting;

In App.js:

import Greeting from './Greeting'

Rendering a Component
A React function component can be rendered by //Component to be rendered
creating a root container and rendering the component
function MyComponent() {
into the root container.
return <h1>Hello, World!</h1>
}

//Rendering the component


ReactDOM.createRoot(
document.getElementById('app')
).render(<MyComponent />);
Multi-line JSX Expressions
Parentheses are used when writing a multi-line JSX return (
expression. In the example, we see that the
<blockquote>
component’s return statement is split over multiple
lines. Therefore it is wrapped in parentheses. <p>Be the change you wish to see in
the world.</p>
<cite>
<a
target="_blank"

href="https://en.wikipedia.org/wiki/Mahat
ma_Gandhi"
>
Mahatma Gandhi
</a>
</cite>
</blockquote>
);

Logic Before return


A React component can contain JavaScript before any function Integer() {
JSX is returned. The JavaScript before the return
const value = 3.14;
statement informs any logic necessary to render the
component. const asInteger = Math.round(value);
In the example code, we see JavaScript prior to the return <p>{asInteger}</p>;
return statement which rounds the value to an
}
integer.
Object Properties As Attribute Values
In React, JSX attribute values can be set through data const seaAnemones = {
stored in regular JavaScript objects. We see this in the
src:
example block of code.
In our code example we first see our JavaScript object
seaAnemones and the values stored with this image. 'https://commons.wikimedia.org/wiki/Categ
We then see how these stored values are used to set
ory:Images#/media/File:Anemones_0429.jpg'
the <img> attributes in our JSX expression for the
SeaAnemones component. ,
alt: 'Sea Anemones',
width: '300px',
};

function SeaAnemones () {
return (
<div>
<h1>Colorful Sea Anemones</h1>
<img
src={seaAnemones.src}
alt={seaAnemones.alt}
width={seaAnemones.width}
/>
</div>
);
}

Print Share

You might also like