Enough React

2020.04.10 React version is v16.13.1.

  • Babel to compile JSX into JavaScript. Babel playground.
  • ReactDOM for render: ReactDOM.render(element, within_element)
  • React.Fragment(...) shorthand <> ... </>
  • Function Component starts with uppercase and self closed <Message />
  • Class-based components superseded by React hooks (functions) (since React 16.8)

JSX

Writing HTML in JS. In JSX, Interpolation happens in {}.

const className = 'quote'
const children = 'Quote'
<div className={className}>{children}</div>

will compile into React.createElement(...)

Validations for React Components

Use prop-types for runtime validation of React Components

function Greet(name) {
  return(
    <div>Hello, {name}</div>
  )
}

Greet.propTypes = {
  name: PropTypes.string,
  name: PropTypes.string.isRequired,
}

prop-types not runs on production. You need to install babel-plugin-transform-react-remove-prop-types to remove prop-types code from source.