© Matej Kotula/Shutterstock.com
Das wichtigste auf einen Blick für den Start mit React

Das React Cheat Sheet


Hello World

// Render a div with Hello World in the body
import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
<div>Hello World</div>
, document.getElementsByTagName("body")[0]);

ES6 Component using Properties

// This component receives properties when invoked
// and uses those properties in the render method
import React from "react";
import ReactDOM from "react-dom";

class Hello extends React.Component {
render() {
return (
<div>
Hello { this.props.name }
</div>
)
}
}

ReactDOM.render(<Hello name="World"/>,
document.getElementsByTagName("body")[0]);

ES6 Component

// Use ES6 to create a reusable component that can
// be rendered by using <Hello /> in JSX
import React from "react";
import ReactDOM from "react-dom";
class Hello extends React.Component {
render() {
return (
<div>Hello World</div>
)
}
}
ReactDOM.render(<Hello />, document.getElementsByTagName("body")[0]);

Rendering Children Nodes

class Messages extends React.Component {
render() {
// This will display everything between the
// opening and closing Messages tags

return (
<div>
{this.props.children}
</div>
)
}
}

class Main extends React.Component {
render() {
return (
<Messages>
<div>Message 1</div>
<div>Message 2</div>
</Messages>
)
}
}

Component Lifecycle

class Lifecycles extends React.Component {
constructor (props) {
// Mounting
// Happens before rendering
}

componentWillMount() {
// Mounting
// Deprecated, you shouldn't use this
}

componentWillReceiveProps (newProps) {
// Updating
// When new properties arrive, use setState() here
}

shouldComponentUpdate (newProps, newState) {
// Updating
// Cancels the rendering if returns false
}

componentWillUpdate (newProps, newState) {
// Updating
// Before component update
}

render() {
// The rendering function builds the DOM to be rendered
}

componentDidUpdate (prevProps, prevState){
// Updating
// Component just updated with new state
}

componentDidMount() {
// Mounting
// After the rendering is done
}

componentWillUnmount() {
// Mounting
// Before unmounting a component
}

componentDidCatch() {
// Mounting
// Used to catch errors
}
}

Events and Simple State Management

// This component has a state and has a method to 
// change the state of the component
class Counter extends React.Component {
state = {
counter: 0
};

constructor(props) {
super(props);
// This is so that we can use this.setState in the
// incrementCounter method. Without it, this is undefined
this.incrementCounter = this.incrementCounter.bind(this);
}

incremen...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang