Create a New React Native Project
In this lesson I’ll show you how to quickly get up and running in React Native with minimal configuration, how to run it on your device, and share with you the limitations of this approach.
- Create React Native App: https://github.com/react-community/create-react-native-app
- Expo iOS: https://itunes.apple.com/app/apple-store/id982107779?ct=www&mt=8
- Expo Android: https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www
Configure the iOS Simulator for React Native Development [Mac Only]
In this lesson we’ll setup your Mac to run a variety of iOS simulators on your machine. This gives you the flexibility of keeping everything local to your machine and the ability to see how your app runs on apps that aren’t in your physical possession.
It’s important to note that iOS simulators only run on a Mac. Therefore, if you want to see your app on iOS and you do not have a Mac, you’ll have to use Expo on a physical iOS device.
- Xcode: https://developer.apple.com/xcode/
- Xcode Install Guide: https://facebook.github.io/react-native/docs/getting-started.html#xcode
Configure the Android Emulator for React Native Development
In this lesson we’ll setup your machine (Mac, Windows, or Linux) to run an Android Emulator. This gives you the flexibility of keeping everything local to your machine and the ability to see how your app runs on apps that aren’t in your physical possession.
- Android Studio: https://developer.android.com/studio/index.html
- Installing Android Studio: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment
- Preparing an Android Device: https://facebook.github.io/react-native/docs/getting-started.html#preparing-the-android-device
Setup Code Linting
Code linting can help you keep a consistent and high quality code standard throughout your app, make it easier to read code (for you and anyone else that works on the project), and helps reduce the possibility of bugs due to typos.
- ESLint: https://eslint.org/
Prettier takes it one step beyond linting by forcing your code to adhere to a specific code style and actually modifying your code to match that style. It may seem intrusive but can dramatically improve code standards and quality.
- Prettier: https://prettier.io/
Automatic Code Linting & Formatting in Visual Studio Code
You won’t want to constantly run your linting and prettier commands and in this lesson I’ll show you how to do this automatically and behind the scenes to ensure you get all the benefits without the obstruction.
- VSCode ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- VSCode Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Configure Visual Studio Code for React Native Development
Your editor is your extension into the world of code. I use Visual Studio Code as my editor and have made a number of configuration changes and installations to turbocharge my React Native workflow.
- React Native Tools: https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
- React-Native/React/Redux snippets for es6/es7: https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux
Full List of Visual Studio Code Packages
- Atom Keymap
- Auto Close Tag
- Auto Complete Tag
- Auto Rename Tag
- Color Highlight
- Copy Relative Path
- Debugger for Chrome
- Document THis
- Flow Language Support
- GraphQL for VSCode
- Language Support for Java
- Node Debug 2
- npm Intellisense
- One Dark
- Path Intellisense
- Prettier - Code formatter
- Project Manager
- Rainbow Brackets
- React Native Tools
- React-Native/React/Redux for es6/es7
- Settings Sync
- SVG Viewer
- TODO Highlight
If you want my always up to date & easy to download configuration it’s accessible as a Github Gist.
Organizing Your React Native Project
It’s great to have flexibility in how you organize your code, but it’s also very intimidating. This lesson will walk you through how I organize my React Native projects. It’s a simple process that has worked on projects where it’s only me as well as teams with multiple developers working on a codebase for months or years at a time.
Configure Navigation in React Native
The likelihood of you having multiple screens in your app is very high. In this lesson we’ll walk through which package I use for navigation (React Navigation) and how I organize & approach navigation in my app.
- React Navigation: https://reactnavigation.org/
Debug a React Native App
Bugs will happen in code. Sometimes you just want to see the raw data making up the UI. React Native has some nice built-in debugging tools to use, which will be introduced and demoed in this lesson.
- Debugging Docs: https://facebook.github.io/react-native/docs/debugging.html
Style a React Native App
Styling your React Native app can feel strange if you’re coming from the web or another environment. I’ll show you my basic approach to setting up styles in my app in a manageable way.
- React Native Extended StyleSheet: https://github.com/vitalets/react-native-extended-…