Creating Your First React Native App
Now that your development environment is ready, it is time to create your first React Native application. This tutorial walks through generating a new project and running it on an emulator or device.
Step 1: Create a New Project
Use the React Native CLI to generate a new project with a default template.
Step 2: Understanding the Entry File
Every React Native project includes an App.js file, which serves as the root component rendered when the application starts.
Step 3: Running on Android
Start an Android emulator or connect a physical device, then run the following command to build and launch your app.
Step 4: Running on iOS (macOS only)
On macOS, you can run the app on the iOS simulator using the following command.
Step 5: Making Your First Edit
Modify the text inside App.js and save the file. Thanks to Fast Refresh, your changes will appear almost instantly on the running app without a full rebuild.
Step 6: Understanding the Build Output
The Metro bundler compiles your JavaScript code and serves it to the native app shell, which then renders it as native UI components on the device or emulator.
Common Beginner Mistakes
- Forgetting to start an emulator before running the build command
- Not saving files before expecting Fast Refresh to apply changes
- Ignoring terminal error messages that point to missing dependencies
Conclusion
Congratulations on creating and running your first React Native application. This foundational step prepares you to explore components, styling, navigation, and more advanced React Native concepts in upcoming tutorials.
