React学习之旅

var name = "world";
var element = <h1>Hello, {name}</h1>;

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(element, document.querySelector('#root'));

function Kompoment(props) {
    return <h1>Hello, {props.name}</h1>;
}

class Komponent extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}</h1>;
    }
}

ReactDOM.render(<Komponent name="world" />, document.querySelector('#root'));

class Komponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {times: 0};
    }

    render() {
        return <h1>How many times: {this.state.times}</h1>;
    }
}

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

this.setState({
  counter: this.state.counter + this.props.increment,
});

<a href="http://www.google.com" onclick="console.log('The link was clicked.'); return false;">
   Click me
</a>

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

ReactDOM.render(<ActionLink />, document.querySelector('#root'));

class Button extends React.Component {
  constructor(props) {
    super(props);
    // This binding is necessary to make `this` work in the callback
    this.handleClick.bind(this);
  }

  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

class Button extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

function NumberList(props) {
    // NOTE: If you dont assign a key to each item, there will be a warning.
    // The keys help React identify which items have changed, are added or are removed.
    // Keys should be given to the elements inside the array to give the elements a stable identity.
    const listItems = props.numbers.map(
        // There is an index of every item, but we should not use it as the key
        // why not index: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
        // why keys are necessary: https://reactjs.org/docs/reconciliation.html#recursing-on-children
        (number, index) => (
            <div key={index}>
              {number + 1}
            </div>
        )
    );

    return (
        <div>{listItems}</div>
    );
}

// Not every array should keep keys for elements, as the array which has only one list element.
// If there are more than one list element, you should use keys.

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

/*
HTML form, input, textarea and select elements work a little bit differently from
other DOM elements in React, because form elements naturally keep some internal state.
*/
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

<input type="file" />

function Komponent(props) {
    return (
        <div className={props.class ? props.class : 'Default'}>{props.children}</div>
    );
}

ReactDOM.render(
    <Komponent class="MyClass"><p>This is assigned to props.children.</p></Komponent>,
    document.querySelector('#root')
);