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 <> ... </>
• Use Function Components
• Function Component starts with uppercase and self closed <Message />; PascalCase for Component Name.
• Class-based components superseded by React hooks (functions) (since React 16.8)
• Compose Components instead of Inheritance
• Recommend: Epic React by Kent C. Dodds

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.