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.js
Components 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.
yarn storybook:web and open http://localhost:9001/ to open the storybook ui
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 are components that are loaded via react native navigation. It should be composed entirely of smart components.
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.
Make sure you understand jest, unit tests, and TDD in general. This project has githooks which check your test on commit.
Become very familiar with each of these libraries.
Recompose High Order components so that you can just use function based components
Jest Unit test framework, integrates with storyshots instead of jest snapshots
React Navigation - Native code excellerated navigation framework
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
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 test
container - generates all tests/story/code boilerplate needed for a container. All files are placed in src/container.
redux g container test
saga - generates all test/code boilerplate needed for a saga. All files are placed in src/saga.
redux g saga test
scene - generates all test/story/code boilerplate needed for a scene. All files are placed in src/scene.
redux g scene test