ReactNative Best Practices & Libs 2020
Most of the things you should to know about React-Native in 2020
For example, say you have the following files in your project:
You can then require the component as follows:
import BigButton from './BigButton';
Use React-Redux and for more hard cases React-Saga
It will make your logic more predictable and straightforward that will help you not to die in cross-calls hell.
Use Class Component For Stateless and Stateful Components
Functional components is not faster.
Component Rendering Performance in React
React is known for performance but it doesn’t mean we can take things for granted. One of the key performance tips for…
Using PureComponent for the boost
If your React component’s
render() function renders the same result given the same props and state, you can use
React.PureComponent for a performance boost in some cases.
Lock Dependencies, Prevent The Breaking Changes
Always use fixed dependencies:
and don’t do like this:
And don’t forget about Android and iOS dependencies.
This will save you hair on your head.
Make importing better
Many of you saw things like that:
import TextComponent from "../../../ComponentFolder/TextComponent"
You can fix this by adding package.json to the ComponentFolder with content:
Now you can import your components from everywhere like that:
import TextComponent from "@components/TextComponent"
Much better, yeah?
Why should you care about the performance of your app? First of all - user expectations. Here are some interesting…
Optimizing Performance - React
Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the…
Performance · React Native
A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a…
Components reuse in the Company
Share reusable code components as a team · Bit
Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop…
Redux!? Mobx!? It’s time to Fall In Love with Remx
Step by Step example for building a simple app with Remx — Flux architecture, through a short, simple, clean and easy…
The React Native crash course by Wix is a self-learning course designed to help you learn everything you need to know…
Redux VS Remx
Remx is simpler with code reuse, Redux uses more boilerplate code and linked to many libraries.
There are two best ways:
- use React-Native Navigation that uses native elements, but harder to use.
- use React Navigation that uses js thread, but simpler to use
Building a cross-platform app can be time consuming especially when one needs to find solutions that suit each…
NativeBase | Essential cross-platform UI components for React Native
Today we moved the react-native-elements repo into its own Github organization. This is a move that allows us to have…