Create your 1st react-native app: A Beginner’s Guide

What is react-native?

React Native is a popular framework for building mobile applications using JavaScript and React. It allows developers to create apps for both iOS and Android with a single codebase, making it an efficient and cost-effective solution for mobile development. In this guide, we'll walk you through the steps to create your first React Native app from scratch.

Prerequisites

Before you start, make sure you have the following installed on your computer:

  • Node.js and npm: Node.js is required to run the React Native command-line tools, and npm comes with Node.js to manage dependencies.
  • React Native CLI: This is the command-line interface for React Native.
  • Xcode (for macOS users): Required for iOS development.
  • Android Studio: Required for Android development.

    Steps to create your 1st react-native app

    Step 1: Setting Up Your Development Environment

  • Install Node.js:

    Download and install Node.js from the official website.


    Verify the installation by running:

    node -v

    npm -v

    Output


  • Install React Native CLI:
    Run the following command to install the React Native CLI globally:
    npm install -g react-native-cli
  • Set Up Android Studio (for Android development):
    Download and install Android Studio from the official website.


    Download the required android sdk from SDK Manager in Android Studio

    The following image illustrates that I have downloaded the most recent version of the Android SDK (V35).


  • Set Up Xcode (for iOS development):
    Install Xcode from the Mac App Store.




    Open Xcode and install the necessary tools, including the Xcode command-line tools.

    Step 2: Creating Your First React Native Project
    Open your terminal and run the following command to create a new React Native project:

    npx react-native --init MyFirstApp

    This command will generate a new directory named MyFirstApp with the basic structure of a React Native app.


    Understanding the Project Structure
  • /android: Contains all the Android-specific code.
  • /ios: Contains all the iOS-specific code.
  • /node_modules: Contains all the npm packages and dependencies.
  • App.tsx: The main entry point of your app. This is where you'll write your React Native components.

    • Navigate to Your Project Directory:

    cd MyFirstApp
    Running Your React Native App
    On IOS

    npx react-native run-ios
    On Android
    Launch Android Studio and use the virtual device manager to launch the virtual device.





    Now run following command to run the app

    npx react-native run-android
    Output

    Conclusion:
    Congratulations! You've just created and run your first React Native app. This guide introduced you to the basics of setting up a React Native environment and building a simple app. From here, you can start exploring more advanced topics, such as navigation, state management, and integrating APIs. 

    Tell me the topic you'd want to learn more about if you want to see future posts like this one. Happy coding!

    Comments

    Post a Comment

    Popular posts from this blog

    Best Practices for Finding Android & iOS Compatible Libraries in React Native

    Image
    A searchable database of libraries created especially for React Native is called React Native Directory . When searching for a library for your React Native application, start here. If you are unable to locate a library designed just for React Native in the directory, the npm registry is the next best option after the React Native Directory. Although the npm registry is the best place to get JavaScript libraries, not all of the packages it contains will work with React Native. Among the various JavaScript development environments are React Native, Node.js, web browsers, Electron, and others. Libraries compatible with these environments may be found in npm. How to determine library compatibility with react-native React Native often does not support libraries designed for other platforms. Example: React-select , designed for the web to explicitly target react-dom, and rimraf , created for Node.js and interacting with your computer's file system, are two examples. Reason: react-dom ...
    Read more