Check out the second edition of our React newsletter:
React vs React Native
If you're not too familiar with the React world, it can be easy to get confused with these two tools. That’s why we’ll explain the fundamental differences.
React: Is a JavaScript library to create UI’s for the web with amazing speed and in a functional way.React Native: Allows one to create native mobile apps for iPhone and Android, reusing many parts of the React stack. It doesn’t create HTML5 apps, but real native apps that can even be opened in XCode and Android Studio.
Although React code is not compatible with React Native, they do share many key concepts. This makes the learning curve for web developers a lot less complicated.
Libraries
Some noteworthy libraries for this edition:
recompose: Set of React utilities that improve the development experience through Higher-Order-Components and solutions to typical problems.
prettier: Code formatter with integration to popular text editors and git.
Architecture and technics
In this section, we will explain some patterns and technics to improve the development in React.
• Stateless functional components: Defining the components as pure functions add several benefits such as testability, portability and more concrete code. It can also help detect code smells and improve performance. Regarding performance, there are also other strategies that are compatible with Stateless functional components that are worth checking out.
• How to tackle the asynchronism in setState(): The asynchronism in setState() is one the key parts in React and its performance, but it can also be a source of problems. Using functions to update the state avoids the asynchronism and allows encapsulation of state updating logic. This improves the separation of responsibilities and testability. Also, it’s likely that React will support this pattern in a more direct way.
• Customization of create-react-app without doing eject: Create-react-app is a very powerful boilerplate that allows a speedy start in React development. Even though it has many configuration options, in real scenarios it’s a common practice to do an eject to make further tweaks. By creating a fork, we can add more customization options without doing an eject. The disadvantage of this is the extra work of keeping the fork updated, but it allows to have the latest create-react-app updates with our own custom configuration.
• List of useful patterns: This is a list of very powerful patterns to use with React. Render Callback is a noteworthy pattern that can be used as a replacement for Higher Order Components.
