8 key decisions in development on React

It's hard to choose with so many options.

React became an open-source project in 2013. Since then, it has evolved greatly. Searching the Internet, you can find old posts with different approaches. Here I will describe the eight key decisions that your team should support when writing to React.

Solution 1: development environment

Before you write your first component, your team needs to agree on a development environment. There are many options.
')


What tool do you usually use when developing on React?

Of course, everything can be done from scratch . 25% of React developers do just that. My team uses the create-react-app bundle with additional features, such as the Mock-API, which supports CRUD , a component reusable library and an improved linter.

Personally, I like the create-react-app, but here you can choose a boilerplate that suits your needs precisely according to a variety of criteria . Need a server render? Check out Gatsby or Next.js. You may even consider using an online editor, such as CodeSandbox .

Solution 2: Types

You can ignore types, use PropTypes , Flow or TypeScript . Please note that since React 15.5 PropTypes is in a separate library , so the old posts on this topic are no longer relevant.

The community is shared in this thread:



To comply with the types in React, I usually use ...

I prefer PropTypes because I believe that it provides sufficient type safety in the React components. Using the combination of Babel, Jest tests , ESLint , and PropTypes, I rarely see problems like runtime.

Solution 3: createClass vs ES classes

React.createClass was a separate API, but at 15.5, it is outdated. Some people think that we are too far ahead of the ES classes . Despite this, the createClass function was removed from React and referred to a single chapter called “React without ES6” in the React documentation. And so it is clear: ES classes are future ones. You can easily convert code from createClass to ES classes using react-codemod .

Solution 4: Classes or Functions

You can declare React components through classes or functions. Classes are useful when you need references or lifecycle methods. Here are 9 reasons to use features whenever possible. But, also, it is worth noting that the functional components have their drawbacks.

Solution 5: States

You can use the standard Reakta State. It's enough. For scaling, you can use the lifting state . Or you can enjoy Redux or MobX.



Please, without controversy - honestly wondering what the React community is using these days. For new React projects I use ...

I like Redux , but I often use the standard React state when possible. At the moment we have released a bunch of React applications, and decided that Redux is the worst choice. I prefer to do many small standalone applications on top of one large application.

Note, if you are interested in immutable structures, here you can see 4 ways to make states unchangeable .

Solution 6: Binding

There are several ways to bind functions in React components. Modern JS offers enough ways to bind. You can bind functions in the constructor, in the renderer, use the function in the renderer, use class properties or decorators. See the comments in this post to see more features. Each approach has its advantages, you may like to use the experimental possibilities of the language, I personally suggest using the properties of classes .

This survey was in August 2016. Since then, class properties have become popular, and createClass has fallen in popularity.



Note: Many people are confused about why the arrow functions and the binding functions in the render cause problems. The real reason? This makes shouldComponentUpdate and PureComponent moody .

Solution 7: Styles

That's where the options really are many. There are 50+ approaches for writing styles to your React components, including traditional CSS, Sass / Less, CSS modules and 56 CSS-in-JS options. No kidding. I spent the statistics and this is what happened:



Red is bad. Green is good. Gray is dangerous.

See why there are so many items in the styling options. There is no clear winner.

How do you style your #reactjs application (answer with a specific library)?



You can see how CSS-in-JS is gaining momentum. Css-modules are losing momentum.

My team uses Sass with BEM and we are happy with it, but I also like the styled components .

Solution 8: Reusable Code

In React, there are so-called mixins - a mechanism for code reuse. However, currently, mixin is not recommended . You cannot use mixins with components of ES classes, because of this, people use higher order components and render-props (aka function as a child) to inherit code between components.



Survey for developers writing to #ReactJS: What do you prefer?

Higher order components are more popular now, but I prefer render-props since they are easier to read and create.

And that's not it

Here are some more solutions:

• Will you use .js or .jsx ?
• Do you put each component in its own folder ?
• Will you use one component for each file?
• If you use propTypes, will you declare separately or within the class itself using static properties ? Announce propTypes as deeply as possible ?
• Will you initialize the states as usual in the constructor, or use the syntax to initialize the properties ?

And since React is just Javascript, you can use a long list of JS options such as semicolons , commas, formatting and naming of the event handler.

Choose standards, then develop

In the end, there are dozens of combinations that you can see on the Internet.
These steps are key:

1. Discuss everything with the team and choose your standard.
2. Do not waste time on manually checking the code. Follow your standards with tools like ESLing , eslint-plugin-react, and prettier .
3. Need restructuring of existing React components? Use react-codemod to automate this process.

Want to learn more about React?

I teach courses on React and JavaScript at Pluralsight ( free trial ).



Cory House is the author of courses on JavaScript, React, .NET , etc., and chief consultant at reactjsconsulting.com . Prepares developers internationally. In his twitter writes about JavaScript and front-end development @housecor .

Translation: Vyacheslav Bukatov

---

EDISON Software is professionally developing for large customers, for example, we developed the client part of GameStars for League of Legends and developed the component of displaying objects on a three-dimensional map on the Unity engine , as well as created a tracking service that analyzes about 200 online stores (over a million positions).

Read more:

• How to strengthen the design team with the help of an intelligent writer
• Rethinking drag & drop
• How to construct words (from an author who hates reading)
• The dangers of charming in design
• How are you zadolbali with their alerts
• With a small or large
• Interfaces: My, Your, Your, Our or This