8 Key React Development Solutions

It's hard to choose with so many options.

React became an open-source project in 2013. Since then it has evolved a lot. By searching the Internet, you can find old posts with different approaches. Here I will describe eight key decisions that your team should support when they write in 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 a create-react-app bundle with additional features, such as the Mock-API, which supports CRUD , a component reuse library, and an improved linter.

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

Solution 2: Types

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

The community is divided in this thread:



For type compliance in React, I usually use ...

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

Solution 3: createClass vs ES classes

React.createClass was a separate API, but at 15.5, it is deprecated. Some believe that we too ran forward to ES classes . Despite this, the createClass function was removed from React and assigned to a single chapter called “React without ES6” in the React documentation. And so it is clear: ES classes are future. 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 functional components have their drawbacks.

Solution 5: States

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



No argument please - 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 whenever possible. At the moment, we have released a bunch of React applications, and decided that Redux is the worst choice. I prefer to make many small standalone applications on top of one large application.

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

Solution 6: Binding

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

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



Note: Many are confused as to why arrow functions and function binders render problems when rendering. The real reason? This makes shouldComponentUpdate and PureComponent moody .

Solution 7: Styles

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



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

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

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



You can see how CSS-in-JS is gaining momentum. CSS modules lose momentum.

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

Solution 8: Reusable Code

React has so-called mixins , a mechanism for reusing code. However, the use of mixins is currently 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 descendant) to inherit code between components.



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

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

And that's not it

Here are some more solutions:

• Will you use .js or .jsx ?
• Will you put each component in your own folder ?
• Will you apply one component for each file?
• If you use propTypes, will you declare separately or inside the class itself using static properties ? Declare propTypes as deep as possible ?
• Will you initialize the states as usual in the constructor, or will you 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 the event handler.

Choose standards, then design

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 manually checking the code. Follow your standards with tools like ESLing , eslint-plugin-react, and prettier .
3. Need to restructure existing React components? Use react-codemod to automate this process.

Want to know more about React?

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



Cory House is the author of courses in JavaScript, React, .NET , etc., the main consultant at reactjsconsulting.com . Prepares developers internationally. He tweeted about JavaScript and the front-end development of @housecor .

Translation: Vyacheslav Bukatov

---

EDISON Software is professionally engaged in the development of large customers, for example, we have developed a client part GameStars game «League of Legends» and develop components display objects in three-dimensional map on the engine, the Unity , as well as created a service for surveillance , which analyzes the 200 online stores (more than a million positions).

Read more:

• How to strengthen the design team with the help of an intelligent writer
• Rethinking drag & drop
• How to design words (from an author who hates reading)
• The dangers of charm in design
• How did you get so sick with your alerts
• Small or Large
• Interfaces: Mine, Your, Your, Our, or This