You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Aug 10, 2023. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+65-20Lines changed: 65 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,37 +1,70 @@
1
1
React + Redux Web Native App
2
2
--------------------
3
3
4
-
The goal of this build is to create a react web and native app using a shared codebase while keeping the integrity of the `create-react-app` and `react-native` build structure...because, who want's to waste time creating the build process.
4
+
The goal of this build is to create a react web and native app using a shared codebase while keeping the integrity of the `create-react-app` and `react-native` build structure...because, who want's to waste time creating the build process or updating custom functionality each version. 🤔
2. (Optional) Rename your app in the `app.json` file.
13
+
2.`cd` into project and remove the `.git` folder and create your own repo.
14
+
```
15
+
cd <AppNameHee>
16
+
rm -rf .git
17
+
```
18
+
19
+
3. Rename your app in the `app.json` file.
13
20
14
-
3. Install dependencies with `yarn install` or `npm install`.
21
+
4. Install dependencies with `yarn install` or `npm install`.
15
22
16
-
4. Build the `/ios` and `/android` native files with `yarn eject:app`
23
+
5. Build the `/ios` and `/android` native files with `yarn app:eject`
17
24
18
-
5. Code the greatest app of all time. 🤔
25
+
6. Run developing environments.
26
+
```
27
+
yarn web:start
28
+
yarn ios:start
29
+
yarn android:start
30
+
```
31
+
32
+
7. Code the greatest app of all time. 🤔
19
33
20
34
### Requirements
21
35
22
36
This is a `node` based build app so having node installed is an obvious requirement!
23
37
38
+
`node` version 8+ highly recommended.
39
+
24
40
`react-native` requires you to have the proper emulators installed for your targeted operating system. Check out the [React Native docs at Facebook](https://facebook.github.io/react-native/docs/getting-started.html) to get the install instructions. Make sure to use the instructions under the "Building Projects with Native Code" tab.
25
41
26
42
(Optional) `npm` is installed with node but I recommend `yarn` package management. Instruction to install Yarn [can be found here](https://yarnpkg.com/en/docs/install).
27
43
44
+
### Workflow
45
+
```
46
+
Index (entry files)
47
+
-> App <- (Storage & Routing)
48
+
-> Screens -> Components
49
+
-> Actions -> Reducers
50
+
```
51
+
`index.js (entry files)`: The index entry files shouldn't need editing.
52
+
53
+
`App.js`: The highest level component. Should be clean and contain the main routes for the app.
54
+
55
+
`storage/ & routing/`: Manages the storage and routing for web and native. Shouldn't need editing unless necessary.
56
+
57
+
`screens/<ScreenName>.js`: The highest level component for each screen in your app. Should contain all of the pure logic to be passed down to components. Screens should also contain connection to the redux store through `connect()`.
58
+
59
+
`components/<ComponentName>/`: Pure, stacked or presentational components that will be used in *Screens*. Presentational components should include `.js`, `.ios.js` & `.android.js` files to work across native and web builds.
60
+
28
61
### Issues / Gotchas
29
62
30
63
###### Testing
31
64
Unfortunately, since the testing environments are different for native and web, and there's no real way for jest to interpret the difference from web and native renders. Any testing you would like to do must be done within `__tests__/<native/web>` directories.
32
65
33
66
###### File Naming
34
-
You will want to separate presentational containers (anything with `render()` for the most part). Since there is no graceful way to determine native and web platform and there is no `.web.js` file extension, presentational containers for the Web should be under the main `.js` file while Native should be under `.ios.js` and `.android.js`.
67
+
You will want to separate presentational containers (anything with `render()` for the most part). Since there is no graceful way to determine native and web platform and there is no `.web.js` file extension without hacking into react itself, presentational containers for the Web should be under the main `.js` file while Native should be under `.ios.js` and `.android.js`.
35
68
36
69
Please note, that if you are targeting both platforms, you will be **required** to use both file name extensions since it will default to the main file if the extension does not exist.
37
70
@@ -49,31 +82,41 @@ export { App as default }
49
82
###### How do I rename the app?
50
83
If you already have the `/ios` & `/android` directories installed, in order to rename the app, delete these directories and run `react-native eject`.
51
84
52
-
To do this in one command, use `yarn eject:app` or `npm run eject:app`.
85
+
To do this in one command, use `yarn app:eject` or `npm run app:eject`.
86
+
87
+
###### How to link native code?
88
+
Linking code is similar to doing it with the `react-native`. You can run `yarn app:link`, `npm run app:link` or `react-native link`.
89
+
90
+
If you *eject* your app, please remember to re-link your native code again.
91
+
92
+
###### Shouldn't I commit the `/ios` & `/android` directories?
93
+
You absolutely should. It's a good idea to remove the `.gitignore` for
94
+
53
95
54
96
### Additional Options
55
97
56
98
Commands can be executed with `yarn <options>` or `npm run <options>`
0 commit comments