React Training
  • React JS Library
  • Roadmap
  • Training OutLine
  • React js basics
    • Understanding React JS
    • React JS a framework?
    • Setting Up React
    • Say Hello to React
    • Everything is a Component
    • Create-react-app
  • React Building Blocks
    • JSX and Babel
    • One Way Data Flow
    • Virtual DOM
    • V of MVC
    • React Terminology
    • React Tooling
  • Day 01
    • Day 01 OutLine
    • All About JSX
    • React Tools/ npm & webpack
    • Introduction of Webpack
    • Hello world using webpack
      • Webpack Setting up with React
    • NPM Scripts | Package JSON
      • Package.json file
    • React JS Principles
      • One Way Data Flow
      • V of MVC
      • Virtual DOM
    • Create React App - Part-1
    • Create React App - Part-2
  • Day 02
    • Quick Recap
      • Quiz
    • State & Props
      • State & Props in Depth
      • State Vs Props | Compare
    • React LifeCycle Methods
      • React LifeCycle Methods for V-0.16 x
    • Constructor | Lifecycle
    • Write Flicker App | First App
  • Day 03
    • Quick Recap
    • Life Cycle Flow
      • Birth and Mounting
      • Initlization and Construction
      • Pre Mounting
      • Render Method
      • componentDidMount
    • Type of React Components
      • Examples- Quick Compare
      • Class and Functional components
      • Functional Components
    • YouTube application
      • Component Design
    • All in One LifeCycle
  • Assignment
    • React App development
  • Day 04
    • Quick Recap on Lifecycle
    • Lifecycle deprecated/New Methods
      • New Lifecycle Methods
    • Lets Build App Netflix | Mock
  • Assignment
    • Github battle App | Assignment
  • Day 05
    • Quick Recap : Hooks
    • ES6 Features | Hands-on
      • ES6 Code Examples
    • Next Stop - React Router | SPA
      • Code examples | Router
      • React Router Building Blocks
      • Application using react-router-dom
  • Day 06
    • Router V4 | Quick Recap
    • ES2015 | 16 Quick Recap
    • LifeCycle Methods -Part-1
    • LifeCycle Methods -Part-2
  • Day 07
    • Quick Recap | New Lifecycle
    • Quick Recap | React Routing
    • Context API | React JS
      • component with context APIs
      • Context API | examples
    • App using Hooks/Context APIs
  • Assignment
    • Assignments
  • State Management Day-08
    • Quick Recap
    • Managing React State
      • What is Redux
      • Understanding Redux
      • Hello World "Redux"
  • React Redux Day - 09
    • Redux State Manager
    • Redux Redux Development
    • Simple Application | Redux
  • Redux Live Application Day -10
    • Redux with existing Application
      • Redux with React App
      • Lets Build More Apps
      • Should I use Redux from Dan
    • Quick Look at JS in React
    • Learn By Reading
  • miscellaneous Items - Day 11
    • Hooks useReducer
    • Hooks useContext
    • Hooks useRef
    • Hooks useEffect
    • Hooks useState
    • Lazy Loading and code splitting
    • Styling React Component
  • React Next Step - Day 12
    • Topics
    • Jest and Enjyme Testing
    • Examples: Testing
  • React Native
    • What is React Native
    • Setting up Environment
      • Linux Systems
    • React Native Hello World App
    • React Native Architecture
    • React Native Vs Native
    • Expo Cli or React Native CLI
  • React Native core Fundamental
    • React Native "Hello World"
    • Course OutLine
    • Getting started with Expo App
    • Layout with Flexbox
    • Working with Styles and Events
    • Manging Component State and Props
    • Build Simple Task List Application
  • What to Debug & How to Debug
    • Debug React Native Application
Powered by GitBook
On this page
  • What is React Native?
  • Getting Started
  • Preview Your Project

Was this helpful?

  1. React Native

Expo Cli or React Native CLI

PreviousReact Native Vs NativeNextReact Native "Hello World"

Last updated 4 years ago

Was this helpful?

What is React Native?

React Native is a JavaScript framework that allows you to create native applications by using the very popular JavaScript library React. One of the great benefits of using React Native is that it allows you to create applications for both IOS and Android by using JavaScript. Meaning that you don’t need to know Objective-C or Swift to build an IOS application and Java for Android.

React Native can decrease development time because it allows you to build one application that will work on two different OS platforms. Also since it uses React it allows you to use components and the reusability that they bring. If you want to learn more about React Native I highly recommend diving into the , which in my opinion is great and provides excellent and clear examples.

Getting Started

Step #1

Make sure you have the latest version of Node.js installed in your computer. To check what version you have run the following command in your terminal:

node -v

In case you don’t have Node.js installed or the latest version click for instructions regarding installation or updating to the newest version.

Step #2

Once you have Node.js installed run the following command:

npm install -g expo-cli

This will install the Expo CLI globally on your computer. If you are using Mac OS you might need to add the sudo followed by the command above. Then you must enter the password to access your computer, on Windows this not necessary.

Step #3

After successfully installing the Expo CLI you can initialize a brand new project by running the following command:

expo init <name of project goes here>

When the project is created you must then change directory to the newly created folder and start the development server. You can achieve this by running the commands below:

cd <name of project goes here>
npm start

After running these commands a new window in your browser will open up with information about your project.

Below is an example of how this will work:

expo init my-todo-app
cd my-todo-app
npm start

At this point you have a brand new React Native project, but how can you preview your project. In the following section I will tackle this issue.

Preview Your Project

To preview your newly created project you need to download Expo Client App on your smartphone. Depending on the phone you have you can do this on the App Store or the Google Play Store.

Once you have the Expo Client App installed scan the QR Code that you saw when you ran npm start on the terminal. You will have to wait a couple of minutes at first while your project bundles and loads for the first time. After it has completed loading you will see a short message in the center of the screen. That’s basically your barebones application running.

In case you only have either an Iphone or an Android smartphone you are able to use simulators, which will allow you to work on both platforms with ease. To use the simulators you first need to download and Xcode (from the app store).

documentation
here
Android Studio