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} />
);
