Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
230 views

Building Front-End Applications With React - Advanced React Cheatsheet - Codecademy PDF

React supports inline and variable styles. Style names use camelCase instead of hyphens, and values are usually strings. React automatically adds "px" for number values. PropTypes are set as a static property on components to define expected prop types. The .isRequired property can be chained to indicate required props, displaying warnings if missing. PropTypes perform type checking on props to validate data types.

Uploaded by

Tawsif Hasan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
230 views

Building Front-End Applications With React - Advanced React Cheatsheet - Codecademy PDF

React supports inline and variable styles. Style names use camelCase instead of hyphens, and values are usually strings. React automatically adds "px" for number values. PropTypes are set as a static property on components to define expected prop types. The .isRequired property can be chained to indicate required props, displaying warnings if missing. PropTypes perform type checking on props to validate data types.

Uploaded by

Tawsif Hasan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Cheatsheets / Building Front-end Applications with React

Advanced React
React CSS styles
React supports inline CSS styles for components.
Styles are supplied as a style prop to components. // Inline CSS
Inline styles can be written as attributes in the opening <h1 style={{ color: 'red' }}>I am red!
tag of a JSX element, while multi-line styles can be </h1>
stored in a variable and that variable can be invoked
into JSX. // CSS styles stored in a variable and
called in
const color = {
color: 'blue',
background: 'sky'
}
<h1 style={color}>Hello</h1>

Style Names And Values


In React, style names are written in camelCase, unlike
in CSS where it’s hyphenated. In most cases, style //hyphenated style name
values are written in strings. When entering number font-size:
values you don’t have to enter "px" because React
automatically adds "px" to make them pixel values. //camelCase style name
fontSize:

//style values written in string form


color: 'blue';

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

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

/
Type Checking
In React, propTypes can be used to perform type-
checking on props. This gives 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.

You might also like