React Overview - ChoDragon9/posts GitHub Wiki

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

<Welcome name="Sara" />

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

<Welcome name="Sara" />

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()}
  }

  componentDidMount() {
    this.timerId = setInterval(
      () => this.tick(),
      1000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timerId)
  }

  tick() {
    this.setState({
      date: new Date()
    })
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}</h2>
      </div>
    )
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

function onClickButton(event) {}

<button onClick={onClickButton}></button>

<button onClick={(e) => this.deleteRow(id, e)}></button>

function UserGreeting (props) {
  return <h1>Welcome back!</h1>
}

function GuestGreeting (props) {
  return <h1>Please sign up.</h1>
}

function Greeting (props) {
  return props.isLoggedIn ? <UserGreeting /> : <GuestGreeting />
}

function Greeting (props) {
  let button;
  if (props.isLoggedIn) {
    button = <UserGreeting />
  } else {
    button = <GuestGreeting />
  }
  return button
}

function Counter (props) {
  return (
    <div> { props.count && <h1>Message: {props.count}</h1>} </div>
  )
}

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
  <li key={number.toString()}>{number}</li>
))

class NameForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {value: ''}
    this.handleBlur = this.handleBlur.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }
  handleBlur () {
    console.log(this.state.value)
  }
  handleChange(event) {
    this.setState({value: event.target.value})
  }
  render() {
    return (<input
      type="text"
      value={this.state.value}
      onBlur={this.handleBlur}
      onChange={this.handleChange}
    />)
  }
}

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string
}

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string
}