Table of Contents
- Styling (CSS)
First, we need to make sure that the development environment is properly configured. When we look at the official documentation, we come across 2 different configurations. We will use the React Native CLI-related configuration in this project and we have not mentioned anything related to the Expo CLI here.
After making your IOS and Android configuration according to your operating system with the steps described in the React Native CLI tab at the bottom of this page, you can continue with the steps below to start the application.
Let's kick the tyres by launching the sample Repospective app bundled with this project to demo some of its best features:npm run setup
For IOS:npx pod-install # to install pod dependenciesnpm run ios # to run the iOS application
For Android:# Make sure the ANDROID_HOME environment variable is configured properlynpm run android # to run the Android application
Start the server:npm start
Navigate to your emulator (IOS/Android) to see it in action.
- Add a Github username to see Redux and Redux Sagas in action: effortless
- Press buttons to navigate between screens
- Choose a language to see the i18n feature in the whole application async state updates and side effects are now yours :)
Time to build your own app: runnpm run clean
...and use the built-in generators to start your first feature.
Building & Deploying (⚠️ Work in progress)
npm run build, which will compile all the necessary files to the
Upload the contents of the
buildfolder to your web server's root folder.
app/ directory contains your entire application code, including CSS,
The rest of the folders and files only exist to make your life easier, and should not need to be touched.
(If they do have to be changed, please submit an issue!)
CSS (⚠️ Work in progress)
Using tagged template literals
styled-components allows you to write actual CSS code to style your components.
It also removes the mapping between components and styles – using components as a
low-level styling construct could not be easier!
See the CSS documentation for more information.
JS (⚠️ Work in progress)
We bundle all your clientside scripts and chunk them into several files using code splitting where possible. We then automatically optimize your code when building for production so you don't have to worry about that.
Testing (⚠️ Work in progress)
For a thorough explanation of the testing procedure, see the testing documentation!
Unit testing (⚠️ Work in progress)
Unit tests live in
test/ directories right next to the components being tested
and are run with
npm run test.