[go: up one dir, main page]
Scribd
Upload
213 views3 pages

Learn React - Advanced React Cheatsheet - Codecademy

This document provides an overview of several advanced React concepts in 3-4 sentences each: Presentational and container components separate business logic and state handling from rendering. Static property sets propTypes for type checking. Controlled vs uncontrolled form fields determine if parent or child maintains state. Controlled components use change handlers and value attributes to update state from form input.

Uploaded by

Ocean of Songs
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
213 views3 pages

Learn React - Advanced React Cheatsheet - Codecademy

This document provides an overview of several advanced React concepts in 3-4 sentences each: Presentational and container components separate business logic and state handling from rendering. Static property sets propTypes for type checking. Controlled vs uncontrolled form fields determine if parent or child maintains state. Controlled components use change handlers and value attributes to update state from form input.

Uploaded by

Ocean of Songs
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/ 3

Cheatsheets / Learn React

Advanced React
React CSS Styles
React supports inline CSS styles for elements. Styles
are supplied as a style prop with a JavaScript // Passing the styles as an object
object. const color = {
color: 'blue',
background: 'sky'
};
<h1 style={color}>Hello</h1>

// Passing the styles with an inline


object, as a shorthand
<h1 style={{ color: 'red' }}>I am red!
</h1>

Style Names And Values


In React, style names are written in “camelCase”,
unlike in CSS where they are hyphenated. In most // Styles in CSS:
cases, style values are written as strings. When // font-size: 20px;
entering numeric values, you don’t have to enter px // color: blue;
because React automatically interprets them as pixel
values. // Would look like this style object in
React:
const style = {
fontSize: 20,
color: 'blue',
};

/
Presentational and Container Components
A common programming pattern in React is to have
presentational and container components. Container class CounterContainer extends
components contain business logic (methods) and React.Component {
handle state. Presentational components render that constructor(props) {
behavior and state to the user. super(props);
In the example code, CounterContainer is a this.state = { count: 0 };
container component and Counter is a this.increment
presentational component. = this.increment.bind(this);
}

increment() {
this.setState((oldState) => {
return { count: oldState.count
+ 1 };
});
}

render() {
return <Counter count=
{this.state.count} increment=
{this.increment} />;
}
}

class Counter extends React.Component {


render() {
return (
<div>
<p>The count is
{this.props.count}.</p>
<button onClick=
{this.props.increment}>Add 1</button>
</div>
);
}
}

/
Static Property
In React, prop types are set as a static property
( .propTypes ) on a component class or a function class Birth extends React.Component {
component. .propTypes is an object with
render() {
property names matching the expected props and return <h1>{this.props.age}</h1>
values matching the expected value of that prop type. }
The code snippet above demonstrates how }
.propTypes can be applied.
Birth.propTypes = {
age: PropTypes.number
}

.isRequired
To indicate that a prop is required by the component,
the property .isRequired can be chained to MyComponent.propTypes = {
prop types. Doing this will display a warning in the year: PropTypes.number.isRequired
console if the prop is not passed. The code snippet };
above demonstrates the use of .isRequired .

Type Checking
In React, the .propTypes property can be used
to perform type-checking on props. This gives import PropTypes from 'prop-types';
developers the ability to set rules on what
data/variable type each component prop should be
and to display warnings when a component receives
invalid type props.
In order to use .propTypes , you’ll rst need to
import the prop-types library.

Controlled vs. Uncontrolled Form Fields


In React, form elds are considered either
uncontrolled, meaning they maintain their own state, const uncontrolledInput = <input />;
or controlled, meaning that some parent maintains
their state and passes it to them to display. Usually, const controlledInput = (
the form elds will be controlled. <input value={this.state.value}
The example code shows an uncontrolled and
onChange={this.handleInputChange} />
controlled input.
);

Controlled Components
A controlled form element in React is built with a
change handler function and a value attribute. const controlledInput = (
<input value={this.state.value}
onChange={this.handleInputChange} />
);

You might also like