Today will start from ground zero, that is will learn about React Native, what it is? What does it do? How to get started with it. Don't worry if you don't know react-native yet, this tutorial will walk you through the basics of it and set you on the right path on your react native journey

“Any application that can be written in JavaScript, will eventually be written in JavaScript.” — Jeff Atwood, Author, Entrepreneur, Cofounder of StackOverflow

1. What is React Native?

React Native is a framework, that enables web developers to build real, natively rendering mobile applications for IOS and Android with react. The wide adoption of react-native for building mobile apps is primarily due to two main reasons

1. As react js is one of the widely used frontend js framework, the adoption of react-native was quick for react js developers.
2. React Native is the only JS framework that outputs real natively rendered mobile applications unlike it convert parts such as ionic or Cordova which runs inside a web view.

2. Installation & environment setup

For building apps with react native we need a few packages first

NODE JS

As of today, you need Node version 12 LTS or greater, you can download the nodejs from this download Link. To check if node js has been installed successfully type the following command to check the version in your command line or terminal

node -v

Expo CLI Expo makes the development of react native apps a lot easier, With expo CLI initially it's a lot easier to manage, run, and build your app. In this tutorial will be using expo for your project, to install expo run the following command

For Windows

npm install -g expo-cli

For Ubuntu or macOS to install expo CLI globally

sudo npm install -g expo-cli

VS Studio code

You can use any code editor of your choice, but I would recommend using VS Studio code and installing the react & react native code snippet extensions. It makes life a lot easier with auto-complete and IntelliSense.

3. Your first React native app

Will use expo CLI to create our first react native project with the following command, expo will take care of fetching the required packages and setting up the project, so we can focus more on developing the app

expo init MyProjectName

Once the process is complete, you can navigate inside your project folder and run the following command to serve the project.

npm start

This will open up a new window for you with a QR code at the bottom left side of the screen, to run the app inside your phone, You would need to install expo mobile app from the app store and scan the QR code (also make sure your computer and mobile are connected on the same wifi/local network) this will start the app running inside your mobile device. You can also run the app in the emulators but would advise you to stick with expo first, and then set up the emulators later when required.

4. Project Structure

The assets folder is used to store all the static assets for projects like images, videos, fonts, etc.

The node_modules folders contain all the modules, libraries, packages required for the project, As our project size increases, will install & use third-party libraries to speed up our development process. These libraries or packages will be stored inside the node_modules folder

The app.json file contains the basic configuration for that app i.e. the app name, icon, splash screen, etc, and a few platform-specific configurations too.

App.js, This is the entry point of our application or the root level component of our application.

package.json, This file contains the list of all the packages required in the app.

5. Start Tinkering

You're all set to start building your own react native apps, I would suggest try changing the default text in your App.js file with Hello world or something else and see it change in your expo app too in real time.

The & component in react native are similar to

That's it for the day peeps, I suggest you pat yourself for coming through these and get your first app up and running for the day, Next will learn navigating in a react native app.