intro to react

what is react?

- React is a JavaScript library that makes writing front-end applications easy.

- React has a declarative, component-based, stateful philosophy that helps organize code in a clean manner

- Is bundled into a browser-friendly version of JavaScript

Component

A component is React class that has it's own properties and state, represents a section, and allows us to encapsulation and abstract logic from other parts of the page.

class HelloMessage extends React.Component {
  render() {
    return (
      <section>
        Hello, World!
      </section>
    );
  }
}

// elsewhere in our code
ReactDOM.render(
  <HelloMessage />,
  document.querySelector('body')
);

class HelloMessage extends React.Component {
  render() {
    return (
      <section>
        Hello {this.props.name}
      </section>
    );
  }
}


//elsewhere in our code
ReactDOM.render(
  <HelloMessage name="Jimmy" />,
  document.querySelector('body')
);

class App extends React.Component {
  render() {
    return (
      <main>
        <HelloMessage name="Tommy" />
        <HelloMessage name="Chucky" />
        <HelloMessage name="Phil" />
        <HelloMessage name="Lil" />
      </main>
    );
  }
}

ReactDOM.render(
  <App />,
  document.querySelector('body')
);