React Notes

Table of Contents

From freeCodeCamp.

JSX

const JSX = (
    <div className="mainDiv">
        <h1>Hello World!</h1>
        <p>Some content.</p>
        {/* comment */}
    </div>
)

ReactDOM.render(JSX, document.getElementById('content'));

Subtle points:

Components

Functional Components

This is a function that returns JSX (or null). Functions must start with capital letters.

const ComponentA = function() {
    return <div>Hello</div>;
}

const Welcome = (props) => <p>{props.name} is aged {props.age}</p>
Welcome.defaultProps = { name: "John" }
const JSX = <App><Welcome age={25}></App>

To add type checking to your properties (list of types here):

import React, { PropTypes } from 'react';
Welcome.propTypes = {
    age: PropTypes.number.isRequired
}

Class Components

class ComponentB extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <h1>{this.props.title}</h1>
                <ComponentA />
            </div>
        )
    }
};

ReactDOM.render(<ComponentB title="Hello"/>, document.getElementById('content'));

With State

In the constructor you need to create a state property.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'Initial State'
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({
      name: "React Rocks!"
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};

setState calls happen asynchronously, so you can’t rely on this.state or this.props. You should instead provide setState with a function that takes the current state and props.

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

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    const text = event.target.value;
    this.setState({
      input: text
    });
  }

  render() {
    return (
      <div>
        <input value={this.state.input} onChange={this.handleChange} />
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Why do we need the value={this.state.input} on the input?

Misc Notes

const Cell = function(props) {
  return (
    <td onClick={props.handleClick(props.x, props.y)}>{props.value}</td>
  )
}

This won’t work - it will call handleClick immediately, you need to change it to:

const Cell = function(props) {
  return (
    <td onClick={() => props.handleClick(props.x, props.y)}>{props.value}</td>
    // this bit: #####
  )
}

Building a Project

Create React App

Use create-react-app.

npx create-react-app minesweeper
npm start
npm run build

Just transforming the JSX to JS

Follow the instructions to use babel here.

Misc

React Hooks and Persistence

Notes Ideas

Project Ideas