This chapter walks through setting up a React Native development environment, creating your first project and running it on a phone or an emulator. It covers both the Expo-based path recommended by the React Native docs and starting without a framework using the React Native Community CLI.
Two ways to start
The React Native docs recommend building new apps with a framework, and the main one is Expo. Expo bundles file-based routing (Expo Router), modules for device features such as the camera, location and notifications, and a cloud build service (EAS). If you want to manage the native projects yourself, or you are adding React Native screens to an existing Android or iOS app, you can start with the Community CLI instead.
Prerequisites
Both paths need Node.js (an LTS release is recommended). Everything else depends on where you want to run the app.
- A physical phone: install the Expo Go app and run your project over the same network as your computer.
- Android emulator: install Android Studio with the Android SDK and a JDK.
- iOS Simulator: you need macOS and Xcode. iOS builds cannot be made locally on Windows or Linux.
- On macOS and Linux, installing the Watchman file watcher is recommended.
node --version
npm --version
Creating a project with Expo
create-expo-app generates a project from the default template, which comes with TypeScript and Expo Router already configured.
npx create-expo-app@latest my-app
cd my-app
npx expo start
npx expo start launches Metro, the JavaScript bundler, and prints a QR code. Scan it with the Expo Go app on Android or with the Camera app on iOS to open your project. While the dev server is running, these keys are available in the terminal:
When you save a file, Fast Refresh re-renders only what changed and keeps component state whenever it can.
Expo Go versus development builds
Expo Go is a prebuilt app that contains only the native modules included in the Expo SDK. It is great for learning and prototyping, but once you need a native library outside the SDK, or want to test native configuration such as the app icon or permissions, you need a development build of your own app.
npx expo install expo-dev-client
npx expo run:android
npx expo run:ios
npx expo run:* requires Android Studio or Xcode on your machine. To build in the cloud instead, use EAS Build, covered in the deployment chapter. npx expo install picks library versions compatible with your Expo SDK, so prefer it over plain npm install in Expo projects.
Without a framework, the generated project includes android/ and ios/ from day one, and you configure the native toolchains yourself.
npx @react-native-community/cli@latest init MyApp
cd MyApp
npm start
npm run android
npm run ios
npm start runs Metro, while npm run android and npm run ios build the native app and install it on an emulator or simulator. iOS dependencies are managed with CocoaPods, so after adding a native library you may need to run bundle exec pod install inside the ios folder again.
Editor setup
Any editor works, but Visual Studio Code is the most common choice. TypeScript support is built in; add the Expo Tools extension for config file completion, plus ESLint and Prettier. In an Expo project, this command adds an ESLint configuration and lints your code:
npx expo lint
For debugging, use React Native DevTools. Press j in the dev server terminal to open it; it offers breakpoints, a console, the React component tree and a profiler.
Summary
- Following the official recommendation, Expo (
npx create-expo-app@latest) is the easiest way to start a new app. npx expo start runs Metro so you can open the app in Expo Go or an emulator.- When you need custom native code, create a development build with
expo-dev-client. - To own the native projects from the start, use the Community CLI's
init command.
コメント 0件
ログイン · ログインするとコメントできます。