Client-Side Coding with React:
Component Oriented

Description

React applications are organized into components. This lesson will show how components can be built up out of smaller components and then reused in new contexts.




 Slides

React Components

  • Isolated pieces of a website or app
  • Can be rendered manually or programatically
  • Dynamic data is passed in via Props
  • Generate child compoents with render()
class Profile extends React.Component {
  userData = () => {
    return data || fetchDataFromDatabase();
  }

  render() {
    <Header>
      <Profile
        name={userData.name}
        interests={userData.interests}
        description={userData.description}
      />
      <Activity />
      <Contact />
    </Header>
  }
}

Using Components

  • Typically the index.js initiates the components tree from the top level
  • Child components are rendered after their parents
  • Parents pass Props and State to children
<html>
  <body>
    <div id="root"/>
  </body>
  <script>
    ReactDom.render(<Profile />,
      document.getElementById('root')
    )
  </script>
</html>

Using Arrays of Components

  • Many components can be rendered at once
  • Wrap the components in an array
  • React will iterate over and render each
class ProfileList extends React.Component {
  render() {
    <Header>
      [
        <Profile userId="One"/>,
        <Profile userId="Two"/>,
        <Profile userId="Three"/>
      ]
    </Header>
  }
}

Building components with Iteration

  • Iteration and Loops can be used just like in plain JavaScript
  • Many components can be built based on collections of data
  • Components can be conditionally rendered
class Comment extends React.Component {
  render () {
    return (
      <li>
        <p>User: {this.props.user}</p>
        <p>Comment: {this.props.content}</p>
      </li>
    )
  }
}

class CommentList extends React.Component {
  render() {
    const comments = [
      { user: 'Joshua', content: 'Components are my fave!' },
      { user: 'Ada', content: 'Yes they make life easy' },
      { user: 'Alex', content: 'Loved them for years' }
    ];
    const commentComponents = forms.map((comment, index) => {
      return <Comment user={ comment.user } content={ comment.content }/>
    });

    return (
    <div className="comments">
      <h2>Comment List</h2>
      <ul>
      { commentComponents }
      </ul>
    </div>
    )
  }
}

Immutable Components

  • Once components are rendered they cannot be updated
  • Re-rendering the component is how to update
<html>
  <body>
    <div id="root"/>
  </body>
  <script>
    function tick() {
      const element = (
        <div>
          <h1>Hello, world!</h1>
          <h2>It is {new Date().toLocaleTimeString()}.</h2>
        </div>
      );
      // highlight-next-line
      ReactDOM.render(element, document.getElementById('root'));
    }

    setInterval(tick, 1000);
  </script>
</html>

Ticking Clock Live

See the Pen React Clock Example by Joshua Burke (@Dangeranger) on CodePen.

https://codepen.io/Dangeranger/pen/gjdNEB

Granular Render Updates

render performance

Component Lifecycle

Mounting

  • constructor()
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()

Updating

  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpdate()

Unmounting

  • componentWillUnmount()

Errors

  • componentDidCatch()

Lifecycle Methods Diagram

react-component-lifecycle

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/


Links



Comments

comments powered by Disqus