How to Set up a New React Native Project

Поделиться Курсом / Книгой / и тд.
#1

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.

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.

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.

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.

Setup Prettier

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.

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.

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.

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
  • ESLint
  • 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
  • Ruby
  • Settings Sync
  • SVG Viewer
  • TODO Highlight
  • vscode-icons
  • vscode-styled-components
  • vscode-styles-jsx

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.

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.

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.