Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
31 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
Available Formats
Download as PDF, TXT or read online on Scribd
31 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
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