blueprints/Make sure you understand react/redux/redux-sagas. (Links in the libraries section)
Take a quick look at the directory structure. (explanations follow)
├── App.js # Entry point for exp
├── App.test-m.js # unit test for Expo. All mobile tests end with .test-m.js to differentiate them from the mobile versions
├── README.md
├── __mocks__ # Mocks for testing
├── app.json # React native and expo file used for app settings, look at the expo docs for more about this
├── blueprints # Blueprints folder, contains components, sagas, etc...
├── combined # something expo creates?
├── package.json
├── public # CRA webpack public serve file
├── src
│ ├── App.css # css file for CRA
│ ├── App.js # basic App for CRA, import by index.js
│ ├── App.test.js # Test for app for web, all web tests end in .test.js (not .test-m.js)
│ ├── components # components, all components should strive to be reusable
│ │ └── Button
│ │ ├── index.js # default button for web (or native, if there is nothing native specific in it)
│ │ ├── index.native.js # will be imported in mobile, instead of index.js. Use this pattern when you need components to be different for each. You should make them have the same api though.
│ │ ├── index.story.js # storybook for native
│ │ └── index.story.native.js # storybook for mobile
│ ├── constants # app config, different for mobile and native
│ ├── index.css
│ ├── index.js # Entry point for CRA, different than expo, expo expects it to be at the root.
│ ├── logo.svg
│ ├── navigation # Routes and navigation setup, different for mobile and native
│ ├── reducers # Basic redux reducer setups
│ ├── registerServiceWorker.js # used by CRA to cache files
│ ├── scenes # Screens (routes) which are always different for native and mobile
│ ├── setupTests.js # test setup file
│ └── store # stores that are different for mobile and native, so that react-router can be effectively synced.
│ ├── configure-store.js
│ └── configure-store.native.js
└── storybook # storybook folder
├── addons.js
├── index.jsComponents Components are like the View in MVC. It should only accept props, and output JSX, with generalized callback props (onClick, onHover, onSomethingCustom, etc...). Think of components like your own personal html framework, these shouldn't know anything about the state of the app.
run yarn storybook:web and open http://localhost:9001/ to open the storybook ui
run yarn storybook:ios and open http://localhost:7007/ and open the app to get the stories in the simulator
Containers (Smart Components)
Containers are components that use redux-connect to map a components props to redux state and actions.
Scenes
Scenes are components that are loaded via react native navigation. It should be composed entirely of smart components.
Services
Services are configurable (often singleton) objects which can be imported into other parts of the app. There is no boilerplates for this because each case for a service is probably too different.
Unit Tests
Make sure you understand jest, unit tests, and TDD in general. This project has githooks which check your test on commit.
Mocks This project uses the axios library for xhr requests, and it's compatable with react native. Mocks are done using axios-mock-adapter
Become very familiar with each of these libraries.
redux - Yes, read all of it.
redux sagas are used instead of redux-thunk.
react-native-elements Basic semi-presytled components to make things more usuable.
Recompose High Order components so that you can just use function based components
Jest Unit test framework, integrates with storyshots instead of jest snapshots
StoryBook/Storyshots used for individual component development, and to take snapshots of the UI, like jest snapshots.
React Navigation - Native code excellerated navigation framework
Recommended Editor: vscode
Development commands
yarn start: Runs all processes in terminus-maximus. Open your browser window to localhost:3000 for web, open localhost:9001 for web storybook, localhost:7007 for storybook mobile controller, and open your expo app for developing natively. (note that storybook won't be able to connect from non localhost simulators).Also note that the QR code in the terminal is not printed correctly. Try using the expo app, or running exp start outside of npm run start to get the qr code to load it onto your phone or simulator
Development Workflow
Start by identifying which components you need and start react-storybook yarn start and open http://localhost:9001/
Create containers to wrap them to state, as needed (which can still be done via creating stories in storybook)
Once you are happy with the way it looks in web, open it in ios and android, to make sure you didn't miss/break something.
At this point your unit tests are probably broken from storyshots. npm run test and take a look through the broken stories to make sure everything is acceptable. If not, fix whats broken, if so run npm run test:update to accept the new DOM changes, and make sure the rest of your tests pass.
TIP: when running tests run npm run test -- --watch to have jest watch your test files and only run the ones that change.
This project takes advantage of the redux-cli project. Which allows you to commit your own template files for generating.
Start your component name with a lowercase, or things may not line up properly
component - generates all tests/story/code boilerplate needed for a component. All files are placed in src/components.
redux g component testcontainer - generates all tests/story/code boilerplate needed for a container. All files are placed in src/container.
redux g container testsaga - generates all test/code boilerplate needed for a saga. All files are placed in src/saga.
redux g saga testscene - generates all test/story/code boilerplate needed for a scene. All files are placed in src/scene.
redux g scene test