Skip to content

Commit 958f3cb

Browse files
author
Ahmed Elshaabany
committed
Update README
1 parent 8453194 commit 958f3cb

File tree

2 files changed

+75
-18
lines changed

2 files changed

+75
-18
lines changed

‎README.md

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
# react-native typescript TDD template
23
This template is a react-native boilerplate project template to start with for new projects.
34

@@ -8,24 +9,51 @@ This template is a react-native boilerplate project template to start with for n
89
* [✅] **TDD ready:** Includes setup for [Jest](https://jestjs.io/), [Enzyme](https://enzymejs.github.io/enzyme/), [Detox](https://github.com/wix/Detox) for component and e2e testing.
910
* [✅] **Lint ready:** ESlint.
1011

11-
### Installation
12+
## Installation
1213
In the desired folder where you want to create the project, open command line and type:
1314

1415
>`npx react-native init {PROJECT_NAME} --template react-native-template-typescript-tdd`
16+
17+
1518
or if you want to install it from Github directly, type:
1619
>`react-native init {PROJECT_NAME} --template https://github.com/zaprogrammer/react-native-template-typescript-tdd.git`
1720
1821

19-
Official documentation for creating custom project templates can be found [here](https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
20-
).
22+
## How to use
23+
This template uses functional components and [React Hooks](https://reactjs.org/docs/hooks-intro.html), but feel free to use class components, or use your preferred state-management library.
24+
25+
### Structure
26+
The template structure is as follows:
27+
28+
#### src
29+
The `src` folder is where all our development files/folders reside.
30+
31+
- ##### App.tsx
32+
App entry point and starting screen, where your App function is defined.
2133

34+
- ##### Navigation.tsx
35+
Contains basic navigation stack for main -> details screens.
2236

37+
- ##### screens
38+
Folder to contains app screens (pages). I structured it to contain each screen in its separate folder, like **main, detail** folders where the screen.tsx and screenStyle.ts files exist.
2339

40+
- ##### model
41+
Contains data objects so to map data retrieved from server or DB to those objects.
2442

25-
* Beside the app configurations, command lines commands:
26-
1- npm login/adduser: Username, password, email
27-
2- Your account should be Org, and login with Org name
28-
3- Add members to the team
29-
4- Go to cmd, then
30-
>`npm publish --access public`
43+
- ##### services
44+
Contains API or server calling related classes, and includes an API.ts file as an abstract class to retrieve data from server.
3145

46+
- ##### helper
47+
Other helper classes or functions like abstract DB layer.
48+
49+
- ##### commons
50+
To contain any shared components or app generic functionality like app common styles.
51+
52+
53+
#### TDD
54+
There are a very good tutorials ([here](https://learntdd.in/react-native/)) covering how to use TDD with react-native so you can apply on this template.
55+
56+
57+
58+
Official documentation for creating custom project templates can be found [here](https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
59+
).

‎template/README.md

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
# react-native typescript TDD template
23
This template is a react-native boilerplate project template to start with for new projects.
34

@@ -8,23 +9,51 @@ This template is a react-native boilerplate project template to start with for n
89
* [✅] **TDD ready:** Includes setup for [Jest](https://jestjs.io/), [Enzyme](https://enzymejs.github.io/enzyme/), [Detox](https://github.com/wix/Detox) for component and e2e testing.
910
* [✅] **Lint ready:** ESlint.
1011

11-
### Installation
12+
## Installation
1213
In the desired folder where you want to create the project, open command line and type:
1314

1415
>`npx react-native init {PROJECT_NAME} --template react-native-template-typescript-tdd`
16+
17+
1518
or if you want to install it from Github directly, type:
1619
>`react-native init {PROJECT_NAME} --template https://github.com/zaprogrammer/react-native-template-typescript-tdd.git`
1720
1821

19-
Official documentation for creating custom project templates can be found [here](https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
20-
).
22+
## How to use
23+
This template uses functional components and [React Hooks](https://reactjs.org/docs/hooks-intro.html), but feel free to use class components, or use your preferred state-management library.
24+
25+
### Structure
26+
The template structure is as follows:
27+
28+
#### src
29+
The `src` folder is where all our development files/folders reside.
30+
31+
- ##### App.tsx
32+
App entry point and starting screen, where your App function is defined.
33+
34+
- ##### Navigation.tsx
35+
Contains basic navigation stack for main -> details screens.
2136

37+
- ##### screens
38+
Folder to contains app screens (pages). I structured it to contain each screen in its separate folder, like **main, detail** folders where the screen.tsx and screenStyle.ts files exist.
2239

40+
- ##### model
41+
Contains data objects so to map data retrieved from server or DB to those objects.
2342

43+
- ##### services
44+
Contains API or server calling related classes, and includes an API.ts file as an abstract class to retrieve data from server.
2445

25-
* Beside the app configurations, command lines commands:
26-
1- npm login/adduser: Username, password, email
27-
2- Your account should be Org, and login with Org name
28-
3- Add members to the team
29-
4- Go to cmd, then
30-
>`npm publish --access public`
46+
- ##### helper
47+
Other helper classes or functions like abstract DB layer.
48+
49+
- ##### commons
50+
To contain any shared components or app generic functionality like app common styles.
51+
52+
53+
#### TDD
54+
There are a very good tutorials ([here](https://learntdd.in/react-native/)) covering how to use TDD with react-native so you can apply on this template.
55+
56+
57+
58+
Official documentation for creating custom project templates can be found [here](https://github.com/react-native-community/cli/blob/master/docs/init.md#creating-custom-template
59+
).

0 commit comments

Comments
 (0)