React development in the face of nine important decision

Choice series: In the process of technological development, we will be faced with a variety of choices, how do we choose the right technology in different situations, this is a problem you want to solve this series of articles.

React in the process of development, we often encounter some of the choices, here I will select some of them personally think that important decisions to one analysis. But remember these are only suggestions mentioned, there may be some aspects have not taken into account, we still need to choose the most appropriate according to their actual situation, do not follow the crowd.

Choice 1: development environment to build

Before beginning React development, you or your team must first consider the choice of what kind of development environment, the first choice goes to a pleasant view of the masses.

Common scene recommended the Create-REACT-App , it will satisfy most of your development needs. If the default configuration does not meet your needs, run npm run ejecton demand to modify your configuration right (Tips: This procedure type can not be undone).

Other alternative

Gatsby suitable for developing static websites
Next.js applied to front and rear ends homogeneous solutions

If all of the above can not meet your needs, pro, yourself and clothing.

Choice 2: Type

JavaScript is weakly typed language, you may ignore type checking, type checking may need to be introduced. The figure is drawing people's choice, how would you choose?

If you are too lazy to toss, that prop-types to meet your type verification, will avoid most types of problems.

If you like to toss, the pursuit of perfection, there is no problem with the following two options:

The typescript JavaScript superset eventually be compiled into a clear and neat native JavaScript code.
Flow add static type checking as Javascript, to improve the efficiency and quality of the code developers.

抉择 3：ES5(createClass) VS ES6(class)

If you are using a development environment ES5 grammar, then you have no choice can only be used createCalss, the official recommended the article " How to use a non-ES6 environment React "

If you use ES6 grammar development environment, it is strongly recommended to use class, simpler to use, Facebook also recommended Class, sample code as follows:

  class SayHello extends React.Component {
    constructor(props) {
      super(props);
      this.state = {message: 'Hello!'};
    }
    render() {
      return (
        <p>
          Say: {this.state.message}
        </p>
      );
    }
  }

Choice 4: VS pure function class

If you do not use life cycle, stateless purely functional as possible (Stateless functional components: new features added in version react-v0.14).

Stateless pure function simple example:

  // 无状态纯函数组件，使用 ES5 
  var Aquarium = function(props) {
    var fish = getFish(props.species);
    return <Tank>{fish}</Tank>;
  };

  // 无状态纯函数组件，使用 ES2015 (ES6) 箭头函数:
  var Aquarium = (props) => {
    var fish = getFish(props.species);
    return <Tank>{fish}</Tank>;
  };

  // 或者再使用对象解构与默认的返回，简单：
  var Aquarium = ({species}) => (
    <Tank>
      {getFish(species)}
    </Tank>
  );

  // 然后使用: <Aquarium species="rainbowfish" />

Based on the principle of single responsibility, you should only components and only one responsibility, internal logic design as much as possible flat. If the logic complexity, then you have to ask whether they also need to break down the components, the use of pure function will always consider you design components is reasonable.

In a word, pure function better help you design your assembly, the underlying component atomic functions make use of pure, reusable or can be considered a more complex logic high pulled out of the logic assembly.

Not to say that all local governments should use a pure function, if you do need to state component and lifecycle operations, it uses the class.

Article comes with a different point of view of two of the (English):

Stateless function module 9 reasons React Stateless Functional Components: Nine Wins You Might Have Overlooked
7 does not use stateless purely functional components reason 7 Reasons to Outlaw React's Functional Components

Choice 5: State

The next thing you need to consider is how to manage your state data, the industry has a lot of programs, choice of the masses is

If it is a simple WEB application, may React provided setState () it can meet your needs, just enough not to forcibly join other State management framework.

If it is a large WEB application, personal recommend the use of Redux . Redux is a predictable state management vessel JavaScript applications. It can help you write applications consistent behavior, it can be run in different environments (WEB client, server and mobile applications, etc.), and easy to test.

Incidentally, one of the core idea of the framework Redux learn Flux , may be interested to look at.

Bobx , simple, scalable state management library. I did not use not elaborate

Choice 6: Binding (Binding)

A picture can do it, do not do more to explain the

Use the arrow function to bind the following sample code:

  class SayHello extends React.Component {
    constructor(props) {
      super(props);
      this.state = {message: 'Hello!'};
    }

    // 使用箭头函数banding
    handleClick = () => {
      alert(this.state.message);
    }

    render() {
      return (
        <button onClick={this.handleClick}>
          Say hello
        </button>
      );
    }
  }

Binding using the constructor following sample code:

  class SayHello extends React.Component {
    constructor(props) {
      super(props);
      this.state = {message: 'Hello!'};
      
      // 在用构造函数banding
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      alert(this.state.message);
    }

    render() {
      return (
        <button onClick={this.handleClick}>
          Say hello
        </button>
      );
    }
  }

Choice 7: Style (Styling)

Style choices too much, we will not list them, we have chosen a few React developers commonly used options, select the best view of the masses in the next

According to the choice of the masses, as if (due to the unknown number of people on the map, not enough sample, can only say that it seems) CSS-in-JS is eating share of CSS-Modules.

Cory House choose to write code using SASS, named using BEM enough, he is also concerned styled-Components .

I tend to logic, structure and style separation stage or the use of SASS, named using BEM. In the near future to explore more suited to their style CSS tissue holder and naming, there will be a special follow-up article ( "CSS-based solutions" series), we do not do in-depth study.

Following is a brief list of what, how to better organize style solution: OOCSS , SMACSS , the BEM , ITCSS , ECSS , SUIT CSS , Atomic Design , Atomic . Welcome to add!

Choice 8: multiplexing logic

Then you have to face is how to reuse your logic, programming world famous saying, "Do not repeat yourself." Figure shouting at people's choice

React initially use Mixins , but the use of mixins cause some BUG and is considered to be harmful (Mixins Considered Harmful) .

Higher-order component (Heigher Order Components), do not know if you can read the following articles:

Facebook official documents in English Higher-Order Components
Chinese reading in-depth understanding of the high-order component React

When the high-level components is now the most popular program, but still need to understand the render props , it is now easier to read than to create advanced components. In fact, I have not had in-depth understanding and practice render props, can not give advice, look at your own choice.

I am now using a high-level components, the future does not rule out the use of render props, the software industry is not constant theme is "change", maybe there will be more reasonable options?

Choice 9: Directory Structure

You are like a shared folder for all components of it, as follows

  src/
  |- App.js
  |- RewarmView.js
  |- RewarmSearchInput.js
  |- RewarmImage.js
  |- RewarmLoading.js
  |- RewarmError.js
  |- giphyLoadData.js

Or each component has its own folder, the basic structure is as follows

  src/
  |- App.js
  |- RewarmSearch/
      |- index.js
      |- View.js
      |- SearchInput.js
      |- Image.js
      |- Loading.js
      |- Error.js
      |- loadData.js

Collapse the folder, it appears to be not very clean

  src/
  |- App.js
  |- RewarmSearch/

Each component in which a separate folder, and more legible

Personal recommendation is that each component has its own folder, How about you?

In the final say

Although I have 6 years experience in the development side, but the article inevitably there will be omissions, but also may be related to your ideas are in conflict, we welcome suggestions or tell you a different point of view.

references

"React the Component 8 Key Decisions" (This link needs over the wall)