ReactNative best practices With best folder structure
React is day to day updating with new features. This post will give some latest best practices for 2020 and easy folder structure.
This is based on my research.
- My recommendation is not to use expo. If it is really small that will be okay. But if you have too much dependency it will be trouble. If you are planning to use expo, please read a to z about expo. Some third party libraries don’t support expo so you wanted to know how to implement that.
By the way, Expo is a great tool but you want to know all about it.
2. Use UIFramework supports
So many frameworks are available. You can choose anything if suitable for your app(all depend with your app requirement.
1.Galio.io Framework
2. https://reactnativeelements.com/
3. React Native UI Kitten
My choice for the last one (React Native UI Kitten) that has many free controllers with some layouts with samples.
3. Use redux for state management
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of add-ons available (copied from main site)
I am sure you already know about redux (https://redux.js.org/) which you used for reactjs.
4. If you use redux use redux-saga as a middleware (https://redux-saga.js.org/)
redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.
The mental model is that a saga is like a separate thread in your application that’s solely responsible for side effects. redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well. (copied from main site)
5. Use typescript for react native app.
If you are familiar with typescript make sure you use typescript. But with actual type. not just extension.
6. Folder structure
After a few testing I came with the following folder structure . For folder structure there is no defined pattern. So you can create according to the your requirement
I created a main source as a src folder
then created following folders inside the src
actions → This is for redux actions
assets → This folder will use for all the assets what we are using in react-native. inside this folder you need to create two for a few folders(for me two folders. that’s for “fonts” and “images’’
config → This is used for keep configuration. If you don’t have much configuration for different sections use config file instead for folder.
i18n → This is for translation strings for users of different language and locale
components → Inside this folder you can create more folders as you wish. this folder will use for UI related components.
containers → This folder will use not ui related things.
reducers → This is for redux reducers
sagas → this is for ‘redux-sage’ middleware
utils → any help functions for util functions will be added to this folder (eg : file utils)
7. Reduce image size and cache images.
Images Caching locally to reduce the time taken to load images. And try to use resize images and not to use the original images if no any requirements for it. Resize needs to be done on the backend side. Every time downloading / original size downloading hit into performance and it is a time consuming task.
Here is the library which I chose.
react-native-fast-image
URL https://github.com/DylanVann/react-native-fast-image
8. Use Newly updated advanced features from react
Use PureComponentor,ShouldComponentUpdate
As you know React will render every tree component on every change. But some scenarios that’s not reasonable because when apps come to more and more components rendering every component will affect loading time. To avoid it, react by giving a simple life cycle method called “ ShouldComponentUpdate”. This is by default true. you can return false if you don’t want to render every time. you can add any coding on it by comparing current, nextstate and nextprops.
Next ‘React.PureComponent” — in pure components above method already implemented with a shallow prop and state comparison.
It means a pure component will only re-renders if props/state is different from the previous props and state.
Now this question is how we implement it with a functional stateless component. (you want to compare methods before re-rendering happens) . The simple answer is React has a High order component called ‘React.memo’ . It’s the same like Reac.PureComponent But this will use functional components instead of class components.
Just wrap with the react.memo that’s it. see the sample
9. Don’t create functions inside render.
<SomeComonent onPress={ () => this.fuc() }>test</SomeComonent>what you need to do is create a function on the outside render and call it when it is needed.
<SomeComonent onPress={ () => this.fuc }>test</SomeComonent>10. Use Functional Component as much as possible For Stateless Presentational Component
Since the Stateless Presentational Components are only dealing with only styles and UI, we should use functional components for this.
you can use Functional Components with Hooks as well that will much fewer lines of code and optimised as well.
11. Use Class Component For Stateful Container Component
12. Use Higher Order Functions
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
URL : https://reactjs.org/docs/higher-order-components.html
13. Keep components clean/small/readable and simple
Cases for file name and component.
My recommendation is use Camel case for component and file for lowercase and add component type as well. Assume you want add component saying big button component,
BigButton as the name and big.button.component.txs as the file
14. Navigation component
I have checked two navigation components.
1) react navigation using javascript (https://github.com/react-navigation/react-navigation)
2) Native navigation for reactnative by wix (React Native Navigation)
Both are well matured to use but I chose the second option for a few reasons.
- I am good with native code (objective c and java)
- I know rendering javascript takes some time. I have noticed some reactnative app navigation is not smooth . Assume that can be improved. But I chose the second option since I know how native works and smoothness. Here is the good article to compare those two navigations (https://medium.com/handlebar-labs/navigating-navigation-in-react-native-26c7e4690f94)
15 . When we talk about library dependency . Better to keep a static/fixed version .
“react-native-img-cache”: “1.5.3”,default one will be as follows:
“react-native-img-cache”: “¹.5.3”,But these things need to be updated and released after proper testing.
16. And test cases
That is it.
