react.md

What we've learnt so far about React

JSX

Javascript XML: It's a Javascript syntax extension and is compiled to Javascript with React Elements using Babel.

examples:

  const element = <h1>Hello, World!</h1>

  const title = 'Hello, World!'
  const element = (<div className="listTile">
    <span className="title">{title}</span>
    <span className="subtitle">Let's learn React!</span>
  </div>)

React Elements

A plain Javascript object. Babel cross-compiles JSX expressions to React elements.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React DOM

React has a virtual DOM...

To render the DOM, use:

ReactDOM.render(element, container[, callback])

Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).

If the React element was previously rendered into container, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.

If the optional callback is provided, it will be executed after the component is rendered or updated.

React Components

React component names should start with a capital letter and use PascalCase convention.

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

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

usage:

const element = <Greeting name="World" />

State & Lifecycle of Components

• this.state -> immutable

•   this.setState({your: 'data'});

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

  -> triggers a re-render
• componentDidMount()
• componentWillUnmount()

mounting: when an instance of component is inserted into the DOM or removed from the DOM.

If you want to initialize the state, you can do it like this:

class MyComponent extends React.Component{
constructor(props) {
    super(props);
    this.state = {your: 'data'};
}
// ...

Events

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

<form onSubmit={handleSubmit}>
<!--
...
-->
</form>

Conditional rendering

• Basic JS if-else
• Inline if-else

const el = <h1>Hello, {condition ? 'World' : 'Mars'}!</h1>

• Inline If with Logical && Operator

const el = <div>{condition && <p>it's true</p>}</div>

if condition evaluates to true, you will see 'it's true' on the screen. It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.

• Lists and Keys
• Forms
• Lifting State Up
• Composition vs Inheritance
• Thinking In React

---

examples:

counter:

class Counter extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      counter: 1
    };
    this.increaseCounter = this.increaseCounter.bind(this);
  }
  
  increaseCounter(){
    this.setState(
      previousState => ({
        counter: previousState.counter + 1
      })
    );
  }
  
  render(){
    return <button onClick={this.increaseCounter}>{this.state.counter}</button>;
  }
}

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