Scribd
Upload
34 views

Introduction To React - React Components Cheatsheet - Codecademy

React components are reusable pieces of code that define the appearance, behavior and state of a portion of a web app's interface. React class components must inherit from React.Component and have a render() method that returns JSX elements. The render() method can contain JavaScript logic and JSX expressions can span multiple lines when wrapped in parentheses. ReactDOM.render() is used to render a component instance to the DOM.

Uploaded by

Nima Shahi
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
34 views

Introduction To React - React Components Cheatsheet - Codecademy

React components are reusable pieces of code that define the appearance, behavior and state of a portion of a web app's interface. React class components must inherit from React.Component and have a render() method that returns JSX elements. The render() method can contain JavaScript logic and JSX expressions can span multiple lines when wrapped in parentheses. ReactDOM.render() is used to render a component instance to the DOM.

Uploaded by

Nima Shahi
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 / Introduction to React

React Components

render() Method
React class components must have a render() method. class MyComponent extends React.Component
This method should return some React elements created
{
with JSX.
render() {
return <h1>Hello from the render
method!</h1>;
}
}

React Component Base Class


React class components need to inherit from the class MyComponent extends React.Component
React.Component base class and have a render()
{
method. Other than that, they follow regular JavaScript
class syntax. render() {
This example shows a simple React class component. return <h1>Hello world!</h1>;
}
}

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 or as classes. Using the component as a factory, function MyFunctionComponent() {
an infinite number of component instances can be return <h1>Hello from a function
created.
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>

ReactDOM.render()
ReactDOM.render() ‘s first argument is a component import React from 'react';
instance. It will render that component instance.
import ReactDOM from 'react-dom';
In this example, we will render an instance of
MyComponent .
class MyComponent extends React.Component
{
render() {
return <h1>Hello world!</h1>;
}
}

ReactDOM.render(<MyComponent />,
document.getElementById('app'));

Multi-line JSX Expressions


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

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

Code in render()
A React component can contain JavaScript before any class Integer extends React.Component {
JSX is returned. The JavaScript before the return
render() {
statement informs any logic necessary to render the
component. const value = 3.14;
In the example code, we see JavaScript prior to the const asInteger = Math.round(value);
return statement which rounds the value to an
return <p>{asInteger}</p>;
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/Catego
We then see how these stored values are used to set the
ry:Images#/media/File:Anemones_0429.jpg',
<img> attributes in our JSX expression for the
SeaAnemones component. alt: 'Sea Anemones',
width: '300px',
};

class SeaAnemones extends React.Component


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

Print Share

You might also like