Skip to content

Commit 92ccdf4

Browse files
JeremyDolleJeremyDolle
committed
update documentation and add blog section
1 parent f821d4d commit 92ccdf4

File tree

9 files changed

+292
-30
lines changed

9 files changed

+292
-30
lines changed

‎documentation/blog/2020-04-19-React-Native-Boilerplate-3.0.0.md

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
---
2+
title: React Native Boilerplate 3.0.0
3+
author: Jérémy Dollé
4+
author_title: React Native Boilerplate contributor
5+
author_url: https://github.com/JeremyDolle
6+
author_image_url: https://avatars.githubusercontent.com/u/15814069?v=4
7+
description: What's in the box? 📦
8+
image: https://i.imgur.com/mErPwqL.png
9+
hide_table_of_contents: false
10+
tags: [boilerplate, starter-kit, starter, kit, react, native, react-native, javascript, typescript]
11+
---
12+
13+
Welcome aboard! 🛥️
14+
15+
As we have active users that uses this boilerplate, we will try to improve communication about updates
16+
we're releasing. It's important for us to give you new reasons to try this boilerplate out!
17+
We would love to have new ideas to make it even more convenient!
18+
19+
To do so, we will post a changelog every major updates. Unlike the changelog in the releases tab, we
20+
will here provide more details and maybe some examples.
21+
22+
In this first post, we will present the current state of this boilerplate.
23+
24+
<!--truncate-->
25+
26+
## Light 🪶 Simple 👌 and Scalable 📏
27+
This boilerplate is the core of every react-native applications we develop at [TheCodingMachine](https://www.thecodingmachine.com/).
28+
This means that we are the first users! If an issue appear we are the first affected 🥺, that's why this project is actively maintained!
29+
30+
The main idea behind this boilerplate is to have just the necessary and well-known stuff to have a very
31+
"*easy to use*" boilerplate for little and big real world apps.
32+
33+
We don't include components libraries, we don't depend on third-party libraries (like Firebase for example).
34+
It's just a good template project that is build on top of all the accumulated experience of our mobile teams.
35+
It also provides a solid architecture that facilitates separation of concerns between the UI, the state management
36+
and the business logic.
37+
Like that, everyone can add its own touch! 🖌️
38+
39+
🚨 Every decision about the technical stack are made regarding our preferences (every library has his
40+
pros and cons).
41+
42+
## Easy to install 😎
43+
44+
Installation has been facilitated since the v2.0.0, thanks to the use of the react-native-cli and
45+
[custom template](https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template).
46+
To run this boilerplate, the only commands you need are
47+
48+
```
49+
npx react-native init --template @thecodingmachine/react-native-boilerplate
50+
yarn start
51+
yarn ios
52+
yarn android
53+
```
54+
55+
That's this simple! 🚀
56+
57+
## Typescript support 💙
58+
59+
Since the v3.0.0, during the installation, you can choose to use typescript for your new app.
60+
All the boilerplate will then be translated in typescript.
61+
62+
![Typescript init](./assets/typescript.png)
63+
64+
That's this simple! 🚀
65+
66+
## Solid libraries 🔨
67+
68+
As I said before, main concerns are simplicity and scalability.
69+
Each of the used libraries are well-known, tried and tested.
70+
71+
### Well-know libraries
72+
73+
For the state management we use [**Redux**](https://redux.js.org/) (redux + redux toolkit + redux persist).
74+
Some people like it, some people don't.
75+
We are really comfortable with this library, it's not so difficult to learn, and the implementation is well-known,
76+
recognized as a good choice and easy [to debug](/docs/UsingFlipper)!
77+
Thanks to this boilerplate and [redux-toolkit](https://redux-toolkit.js.org/), the state management is ready out of the box.
78+
A complete example is even included. This way, you can easier understand how it works.
79+
To deal with the navigation, [**React Navigation**](https://reactnavigation.org/) is THE reference for screen navigation.
80+
For the internationalization we use [**I18next**](https://www.i18next.com/). Well-know library, really easy to use and
81+
providing nice hooks.
82+
83+
### redux-toolkit-wrapper
84+
This project is a Redux-toolkit wrapper (yes... it's obvious 😅) used to write less code regarding classic CRUD operations.
85+
Redux-toolkit provide a lot of abstraction for async operations, but we always have to create a `loading` and `error`
86+
state and associated reducers.
87+
Redux-toolkit-wrapper abstract this async operations. For a classic *"fetch one user"* operation all you need to add these files :
88+
89+
```javascript title="src/Store/User/FetchOne.js"
90+
import {
91+
buildAsyncState, buildAsyncReducers, buildAsyncActions,
92+
} from '@thecodingmachine/redux-toolkit-wrapper'
93+
import fetchOneUserService from '@/Services/User/FetchOne'
94+
95+
export default {
96+
initialState: buildAsyncState('fetchOne'),
97+
action: buildAsyncActions('user/fetchOne', fetchOneUserService),
98+
reducers: buildAsyncReducers({
99+
errorKey: 'fetchOne.error',
100+
loadingKey: 'fetchOne.loading',
101+
}),
102+
}
103+
104+
```
105+
106+
```javascript title="src/Store/User/index.js"
107+
const sliceInitialState = {
108+
item: {},
109+
}
110+
111+
export default buildSlice('user', [FetchOne], sliceInitialState).reducer
112+
```
113+
114+
After that, you can use you state in you container like this :
115+
116+
```javascript
117+
import React, { useEffect } from 'react'
118+
import { useDispatch, useSelector } from 'react-redux'
119+
import { View, ActivityIndicator, Text } from 'react-native'
120+
import FetchOne from '@/Store/User/FetchOne'
121+
122+
const ExampleContainer = () => {
123+
const dispatch = useDispatch()
124+
125+
const user = useSelector(state => state.user.item)
126+
const fetchOneUserLoading = useSelector(state => state.user.fetchOne.loading)
127+
const fetchOneUserError = useSelector(state => state.user.fetchOne.error)
128+
129+
useEffect(() => {
130+
dispatch(FetchOne.action(id))
131+
}, [dispatch])
132+
133+
return (
134+
<View>
135+
{fetchOneUserLoading && <ActivityIndicator />}
136+
{fetchOneUserError ? (
137+
<Text style={Fonts.textRegular}>{fetchOneUserError.message}</Text>
138+
) : (
139+
<Text style={Fonts.textRegular}>
140+
{t('example.helloUser', { name: user.name })}
141+
</Text>
142+
)}
143+
</View>
144+
)
145+
}
146+
147+
export default ExampleContainer
148+
```
149+
150+
That's this simple! 🚀
151+
152+
:::info
153+
For more details about redux-toolkit-wrapper jump [**here**](/docs/ReduxStore)
154+
:::
155+
156+
## What is included? 📦
157+
158+
Still hesitating? Let's make a recap and see what this beautiful boilerplate can provide to you :
159+
- No headache! 🤒 It's really easy to install and use
160+
(if you have all the [requirements](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies)
161+
installed of course)
162+
- Typescript 💙 / Javascript 💛? You choose!!
163+
- React Navigation : THE powerful library to handle navigation 📱
164+
- Redux (with redux-toolkit and redux-toolkit-wrapper 😉) : handling redux store has never been as easy as this!! ⚡
165+
- Multi-theming and darkMode friendly 🌗 (see [here](/docs/ThemesAndDarkMode))
166+
- i18n friendly 🌐 (see [here](/docs/AddALangTranslation))
167+
- Flipper debugger ready 🐛 (see [here](/docs/UsingFlipper))
168+
- Maintained by passionate developers ⚛️
169+
- Full online documentation : https://thecodingmachine.github.io/react-native-boilerplate/
170+
171+
just test it 🧪!!
172+
173+
## Installation plugins ⚙️
174+
175+
In the v3.0.0 we add an installation plugins system on our boilerplate. The first plugin is the typescript one of course.
176+
So now, we are able to add local or npm plugins on our boilerplate to apply them during the installation, without any
177+
unwelcome piece of code in the final app architecture. So it's invisible for the final user but hide a lot of future creation!! 🤩
178+
So wait and see what could be the next plugins...🕓🤐
179+
180+
## What is different from other? 🪟
181+
182+
We looked into existing boilerplates before starting this project, and while many of them are awesome, we did not find
183+
what we were looking for.
184+
185+
One of the most popular was [Matt Mcnamee's React Native Starter Kit](https://github.com/mcnamee/react-native-starter-kit),
186+
which unfortunately missed Redux Saga (used in the V1.0.0 of this project).
187+
188+
When we looked at the rest (and ignore unmaintained projects), many popular boilerplates were too opinionated: they
189+
included 3rd party services or very strong architecture choices that we are not comfortable with.
190+
To name a few:
191+
- [Snowflake](https://github.com/bartonhammond/snowflake) runs with a Hapi Server running on Redhat OpenShift,
192+
- [Apollo's StarterKit](https://github.com/sysgears/apollo-universal-starter-kit) is targeted at GraphQL using Apollo,
193+
- [Meteor Boilerplate](https://github.com/spencercarli/react-native-meteor-boilerplate) targets Meteor…
194+
195+
Finally, some did not contain the architecture we are looking for (the separation of concerns with Redux, Sagas, etc.),
196+
for example [re-start](https://github.com/react-everywhere/re-start).
197+
198+
One interesting exception was [Ignite IR Boilerplate "Andross"](https://github.com/infinitered/ignite-andross), but after
199+
consideration we decided not to use it because of the large amount of unnecessary code/components it provided.
200+
201+
In 2021, some react-native boilerplates have change. Let's see what are the difference
202+
203+
<table>
204+
<thead>
205+
<tr>
206+
<th align="left">Boilerplate</th>
207+
<th align="left">Difference from our</th>
208+
</tr>
209+
</thead>
210+
<tbody>
211+
<tr>
212+
<td align="left">mcnamee/react-native-starter-kit</td>
213+
<td align="left">
214+
<ul>
215+
<li>No react Navigation (react-native-router-flux instead),</li>
216+
<li>No typescript support,</li>
217+
<li>Don't use the react-native-cli to init</li>
218+
</ul>
219+
</td>
220+
</tr>
221+
<tr>
222+
<td align="left">bartonhammond/snowflake</td>
223+
<td align="left">seems not maintain (last release in 2017) 💤</td>
224+
</tr>
225+
<tr>
226+
<td align="left">sysgears/apollo-universal-starter-kit</td>
227+
<td align="left">
228+
<ul>
229+
<li>Is targeted at GraphQL using Apollo,</li>
230+
<li>Don't use the react-native-cli to init</li>
231+
</ul>
232+
</td>
233+
</tr>
234+
<tr>
235+
<td align="left">spencercarli/react-native-meteor-boilerplate</td>
236+
<td align="left">seems not maintain (no release, last commit in 2018) 💤</td>
237+
</tr>
238+
<tr>
239+
<td align="left">react-everywhere/re-start</td>
240+
<td align="left">seems not maintain (last release in 2017) 💤</td>
241+
</tr>
242+
<tr>
243+
<td align="left">infinitered/ignite</td>
244+
<td align="left">
245+
<ul>
246+
<li>Specific folders for ignite-cli and boilerplate items,</li>
247+
<li>MobX instead of Redux,</li>
248+
<li>Expo ready,</li>
249+
<li>Reactotron (ignite product) ready,</li>
250+
<li>Typescript only</li>
251+
</ul>
252+
</td>
253+
</tr>
254+
</tbody>
255+
</table>

‎documentation/blog/assets/typescript.png

65.7 KB
Loading

‎documentation/docs/1_Introduction/1_1_RNBoilerplate.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
slug: /Introduction
3-
title: React Native Boilerplate
3+
title: React Native Boilerplate 🐙
44
---
55

66
<div align="center">
@@ -17,7 +17,7 @@ We made this full documentation so that each piece of code that lands in your ap
1717
If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives 🌈 ☀️
1818
:::
1919

20-
## Architecture
20+
## Architecture 🧱
2121

2222
The driving goal of the architecture of the boilerplate is separation of concerns and using React Native at its best.
2323

@@ -39,7 +39,7 @@ The driving goal of the architecture of the boilerplate is separation of concern
3939

4040
If you are interested you can [read more about it here](https://redux.js.org/introduction/motivation).
4141

42-
## Content
42+
## Content 🧳
4343

4444
The boilerplate contains:
4545

@@ -55,7 +55,7 @@ The boilerplate contains:
5555

5656
The boilerplate includes an example (displaying fake user data) from UI components to the business logic. The example is easy to remove so that it doesn't get in the way.
5757

58-
## Directory layout
58+
## Directory layout 🗂️
5959

6060
- `src/Assets`: assets (image, audio files, ...) used by the application
6161
- `src/Components`: presentational components
@@ -67,6 +67,6 @@ The boilerplate includes an example (displaying fake user data) from UI componen
6767
- `src/Translations`: application strings, you can add languages files and be able to translate your app strings
6868
- `src/Theme`: base styles for the application
6969

70-
## Updates
70+
## Updates 🕐
7171

7272
The boilerplate will follow new React-Native releases as soon as libraries and tools used here are compatible.

‎documentation/docs/2_Getting Started/2_1_Installation.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
22
slug: /Installation
3-
title: Installation
3+
title: Installation 💿
44
---
55

6-
## Requirements
6+
## Requirements 🎒
77

88
Node 12 or greater is required. Development for iOS requires a Mac and Xcode 10 or up.
99

@@ -12,20 +12,20 @@ You also need to install the dependencies required by React Native:
1212
- for [Android development](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies-3)
1313
- for [iOS development](https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies)
1414

15-
## Using the boilerplate
15+
## Using the boilerplate 💻
1616

1717
To create a new project using the boilerplate simply run :
1818

1919
```
2020
npx react-native init MyApp --template @thecodingmachine/react-native-boilerplate
2121
```
2222

23-
## Running with typescript
23+
## Running with typescript 💙
2424

2525
During the installation the cli will ask you if you want to use typescript, tap on the `y` key and all the requirement will be set.
2626
to type check your project just run `yarn tsc`.
2727

28-
## Running the project
28+
## Running the project 📲
2929

3030
Assuming you have all the requirements installed, you can run the project by running:
3131

‎documentation/docs/2_Getting Started/2_2_Configuration.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ title: Configuration
66
## Change the appicon
77
To help generate appicons, you can use an online tool like [appicon](https://appicon.co/) to generate for both iOS and Android all icons and image sets.
88

9-
### iOS
9+
### iOS 🍎
1010
To change the appicon of the iOS application, you need to replace all the content of
1111
```
1212
src > ios > *name_of_your_app* > Images.xcassets > AppIcon.appiconset
1313
```
1414
with your appicons generated with [appicon](https://appicon.co/) for example.
1515

16-
### Android
16+
### Android 🤖
1717
To change the appicon of the Android application, you need to replace all the content of
1818
```
1919
src > android > app > src > res
@@ -24,15 +24,15 @@ with your appicons generated with [appicon](https://appicon.co/) for example.
2424

2525
## Change the splash screen icon
2626

27-
### iOS
27+
### iOS 🍎
2828
You can use the same tool ([appicon](https://appicon.co/)) to generate image sets (@1x, @2x, @3x).
2929
Then you just have to replace : `[email protected]`, `[email protected]`, `[email protected]` with yours in :
3030
```
3131
src > ios > *name_of_your_app* > Images.xcassets > SplashIcon.imageset
3232
```
3333

34-
### Android
34+
### Android 🤖
3535
You just have to replace the splash_icon.png located at :
3636
```
3737
src > android > app > src > res > drawable
38-
```
38+
```

0 commit comments

Comments
 (0)