First React Component

class App extends React.Component {
  render() {
    return <div>Hi</div>
  }
}

we first extend React.Component, calling it App. In the extension of React.Component we will always have a render() method, which is expected to return other elements or components.

we are using jsx, which is a hybrid of html and js, where all jsx gets compiled into js.

another way we can create an app is with a state function component that looks like this:

const App = () => <h1>hello there ppls</h1>

the difference is that a class component can have state, whereas a stateless function component will NOT have state

render() method

our render() method is only allowed to return one component. If we want to return more than one element, wrap in a surrounding div or wrap them in () like so:

class App extends React.Component {
  render() {
    return (
      <div>
        <div>Hi</div>
        <b>hello there!</b>
      </div>
    )
  }
}

intro to properties

we are gonna strip down our main.js down to just import App, we are gonna render in our App.js instead of main.js

under our class declaration we gonna use ReactDOM.render(…) like so:

ReactDOM.render(
  <App txt="this is the props text" />,
  document.getElementById('app')
)

where the property on is txt, and its value is “this is the props text”

now in our class declarations render() method we can do the following:

class App extends React.Component {
  render() {
    return <h1>{this.props.txt}</h1>
  }
}

where this.props.txt is equal to what it is set to in our ReactDOM.render()

we can also write our render() method like so:

render() {
  let txt = this.props.txt
  return <h1>{txt}</h1>
}

we can set validations using the PropTypes method on App which takes an object that looks like the following:

App.propTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number
}

we can tak on isRequired to throw an error if the property isnt specified:

App.propTypes = {
  txt: React.PropTypes.string,
  cat: React.PropTypes.number.isRequired
}

we can set default values using App.defaultProps = { … }