DEV Community

Umer Rajpòót
Umer Rajpòót

Posted on

15

🚀 How to Create a React Native Project: A Step-by-Step Guide

Are you ready to dive into mobile development with React Native? Whether you’re a beginner or just looking to refresh your skills, this guide will walk you through creating your first React Native project.

🛠️ Prerequisites

Before we get started, make sure you have the following installed:

  • Node.js and npm: You can download and install them from Node.js official site.
  • Java Development Kit (JDK): For Android development.
  • Xcode: For iOS development (Mac only).

1. Install Node.js and npm

React Native relies on Node.js, which includes npm (Node Package Manager). Verify your installation with:

node -v
npm -v
Enter fullscreen mode Exit fullscreen mode

2. Install Expo CLI or React Native CLI

You can choose between Expo CLI (ideal for beginners) and React Native CLI (for more advanced setups).

Using Expo CLI:

Install Expo CLI globally:

npm install -g expo-cli
Enter fullscreen mode Exit fullscreen mode

Using React Native CLI:

Install React Native CLI globally:

npm install -g react-native-cli
Enter fullscreen mode Exit fullscreen mode

3. Create a New Project

With Expo CLI:

expo init MyNewProject
Enter fullscreen mode Exit fullscreen mode

Follow the prompts to choose a template, then navigate into your project folder:

cd MyNewProject
Enter fullscreen mode Exit fullscreen mode

Start the development server:

expo start
Enter fullscreen mode Exit fullscreen mode

With React Native CLI:

npx react-native init MyNewProject
Enter fullscreen mode Exit fullscreen mode

Navigate into your project folder:

cd MyNewProject
Enter fullscreen mode Exit fullscreen mode

Run your project on an Android emulator or iOS simulator:

npx react-native run-android  # For Android
npx react-native run-ios      # For iOS
Enter fullscreen mode Exit fullscreen mode

4. Start Coding

Your project is now set up! Open your project in your favorite code editor (e.g., VSCode) and start building your app. Modify App.js to start coding your app:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, React Native!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 20,
  },
});

export default App;
Enter fullscreen mode Exit fullscreen mode

5. Run Your App

  • Expo: Your app should automatically refresh on your device or simulator when you save changes.
  • React Native CLI: Use the development server commands to view changes on your emulator or connected device.

Congratulations! 🎉 You’ve just created your first React Native project. Keep exploring React Native components and APIs to build more complex apps. For detailed documentation and advanced features, check out the React Native Docs and Expo Docs.

Happy coding! 🚀

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

đź‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay