Guide React Native · 1/6
Ce chapitre n'est disponible qu'en anglais pour le moment.
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.
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.
| Approach | Command | Good fit |
|---|---|---|
| Expo (recommended) | npx create-expo-app@latest | Most new apps |
| Community CLI | npx @react-native-community/cli@latest init | Teams that want to own the native code |
Both paths need Node.js (an LTS release is recommended). Everything else depends on where you want to run the app.
node --version
npm --versioncreate-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 startnpx 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:
| Key | Action |
|---|---|
a | Open on an Android emulator or device |
i | Open in the iOS Simulator (macOS) |
w | Open in a web browser |
r | Reload the app |
j | Open React Native DevTools (debugger) |
m | Toggle the developer menu |
When you save a file, Fast Refresh re-renders only what changed and keeps component state whenever it can.
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:iosnpx 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 iosnpm 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.
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 lintFor 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.
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.expo-dev-client.init command.
0 commentaire
Se connecter · Connectez-vous pour laisser un commentaire.