React.js

How do I nest components?

const UserName = ({ name }) => return name.trim();

const UserProfile = ({ name, ... }) => {
  return (
    <div className="very-beautiful">
        // ?
    </div>
  )
}

const App = () => {
  return (
    <UserProfile>
      <UserName />
    </UserProfile>
  )
}

What happens with lowercased components?

const message = () => "hello";
const element = (
  <div>
    <message />
  </div>
);

What happens with lowercased components?

const message = () => "hello";
const element = /*#__PURE__*/React.createElement(
  "div", 
  null, 
  /*#__PURE__*/React.createElement("message", null)
);

What happens with lowercased components?

What happens with lowercased components?

React used to contain a whitelist of well-known element names like div etc, which it used to differentiate between DOM elements and React components.

But because maintaining that list isn't all that fun, and because web components makes it possible to create custom elements, they made it a rule that all React components must start with a upper case letter, or contain a dot.

Recap

  • JSX is a special "zone" with special rules
    • srestricted between <tags>
    • inserts JS parts via { } interpolation
  • React components look almost like regular functions
    • const User = ({ name }) => return name.toUpperCase()
    • {users.map(User)}
    • {users.map(user => User(user))}
    • {users.map(user => <User name={user.name} />)}

CRA

https://github.com/facebook/create-react-app

You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.

Most basic and used hooks

Don't add excessive state

const User = (props) => {
  const [name, setName] = useState(props.name);
  const [nameInCaps, setNameInCaps] = useState(name); // 🤮🤮🤮

  useEffect(() => {
    setNameInCaps(name.toUpperCase());
  }, [name]);

  // ...

  return nameInCaps;
}

Use derived values for props and state

const User = ({ name }) => {
  const nameInCaps = name.toUppercase();
  // ...
  return nameInCaps;
}

Storing and updating data in component

function Greeting() {
  const [name, setName] = React.useState('')
  const handleChange = event => setName(event.target.value)
  return (
    <div>
      <form>
        <label htmlFor="name">Name: </label>
        <input onChange={handleChange} id="name" />
      </form>
      {name ? <strong>Hello {name}</strong> : 'Please type your name'}
    </div>
  )
}

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

Reaction on something

  • do something when value changes
  • do something every time component is rendered
  • do something when component is rendered for the first time

Reaction on value changes

const [name, setName] = React.useState(() => window.localStorage.getItem('name') || '')

React.useEffect(() => {
  window.localStorage.setItem('name', name)
}, [name])

const handleChange = event => setName(event.target.value)

Less used hooks

  • useContext- to create accessible points of data on different levels of comp nesting
  • useRef
    • to work with dom elements
    • to store/update mutable values without causing render
    • in pair with useImperativeHandle enables parent to call child methods

Even less used hooks

  • useReducer- like useState but for complex changes
  • useCallback, useMemo- to optimize stuff
  • useLayoutEffect- similar to useEffect, mainly to read layout, calculate dimensions
  • useDebugValue- label in React Devtools, for shared libraries

React re-renders

React re-render ≠ DOM re-render

Resources