Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use create-react-native-app to Set Up a Simple React Native App

    Bram BorggreveBram Borggreve

    React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globally and create a new project.

    After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called Expo Client on our mobile phone and use it to scan the QR code.

    This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use console.log the messages will be printed in our terminal.

    Download the Expo Client from App Store or Google Play

    react-nativeReact Native
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 We install Create React Native App globally, then we will create our app by running Create React Native App with our app name, my-app. This will create the base project in the my-app folder, and it will install the project dependencies.

    00:13 When the project is created, we CD into our project directory, and start the project by running "npm start." This will start the development server. Once the server is started, it will print a QR code that can be used to load the app on your mobile.

    00:27 On your phone, you need to download Expo Client from the App Store or Google Play. In the Expo client we select "scan QR codes," and we scan the code in our terminal. Our application will now be loaded. We open the project in our IDE and open app.js.

    00:45 When we edit the content, we will see the app refresh, and it shows us the updated content. We can debug our application by adding a console log message in the component. This will be printed in the terminal.

    Discuss

    Discuss