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

Das React Cheat Sheet

Hello World

Joel Lord


// Render a div with Hello World in the bodyimport React from "react";import ReactDOM from "react-dom";ReactDOM.render(

Hello World
, document.getElementsByTagName("body")[0]);// This component receives properties when invoked// and uses those properties in the render methodimport React from "react";import ReactDOM from "react-dom";class Hello extends React.Component { render() { return (
Hello { this.props.name }
) }}ReactDOM.render(, document.getElementsByTagName("body")[0]);// Use ES6 to create a reusable component that can// be rendered by using in JSXimport React from "react";import ReactDOM from "react-dom"; class Hello extends React.Component { render() { return (
Hello World
) }}ReactDOM.render(, document.getElementsByTagName("body")[0]);class Messages extends React.Component { render() { // This will display everything between the // opening and closing Messages tags return (
{this.props.children}
) }}class Main extends React.Component { render() { return (
Message 1
Message 2
) }}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 }}// This component has a state and has a method to // change the state of the componentclass 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.incrementCount...
JavaScript Kompendium
Das wichtigste auf einen Blick für den Start mit React

Das React Cheat Sheet

Hello World

Joel Lord


// Render a div with Hello World in the bodyimport React from "react";import ReactDOM from "react-dom";ReactDOM.render(

Hello World
, document.getElementsByTagName("body")[0]);// This component receives properties when invoked// and uses those properties in the render methodimport React from "react";import ReactDOM from "react-dom";class Hello extends React.Component { render() { return (
Hello { this.props.name }
) }}ReactDOM.render(, document.getElementsByTagName("body")[0]);// Use ES6 to create a reusable component that can// be rendered by using in JSXimport React from "react";import ReactDOM from "react-dom"; class Hello extends React.Component { render() { return (
Hello World
) }}ReactDOM.render(, document.getElementsByTagName("body")[0]);class Messages extends React.Component { render() { // This will display everything between the // opening and closing Messages tags return (
{this.props.children}
) }}class Main extends React.Component { render() { return (
Message 1
Message 2
) }}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 }}// This component has a state and has a method to // change the state of the componentclass 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.incrementCount...

Neugierig geworden?


   
Loading...

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