React JS

Project Structure

Create a project with the following folder structure:
Picture

Use JSX

If you come from a web development background JSX will feel very natural. But if your background is not in web develop don’t worry too much, JSX is very easy to learn.

Keep your components small (Very Small)

Rule of thumb is that if your render method has more than 10 lines is probably way too big. The whole idea of using React is code re-usability so if you just throw everything in one file you are losing the beauty of React.

Minimize your State

Best practice in React is to minimize your state. One thing to keep in mind is to avoid synchronizing state between a child and parent. Use ShouldComponentUpdate for performance optimization React is a templating language that renders EVERY TIME the props or the state of the component changes. So imagine having to render the entire page every time there in an action. That takes a big load on the browser. That’s where ShouldComponentUpdate comes in, whenever React is rendering the view it checks to see if shouldComponentUpdate is returning false/true. So whenever you have a component that’s static do yourself a favor and return false. Or if is not static check to see if the props/state has changed.

export default class BindFunctionExample extends React.Component {

  constructor() {

    super(); 

    this.state = {

      hidden: true

    };

    this.toggleHidden = this.toggleHidden.bind(this);

  }

  toggleHidden() {

    const hidden = !this.state.hidden;

    this.setState({

      hidden

    });

  }

  render() {

    return <button onClick={this.toggleHidden} />;

  }

}

Always bind the functions in the constructor method

Whenever working with components that uses state try to bind components in the constructor method.

Avoid Refs

Refs will only make your code harder to maintain. Plus when you use refs you are manipulating the
virtual Dom directly. Which means that the component will have to re-render the whole Dom tree.

ABOUT

CEMEX is a global building materials company that provides high-quality products and reliable service to customers. See more.

Learning Hub   |   CEMEX Go

Copyright © 2020, CEMEX International Holding AG. All rights reserved.