Getting Started With React Native
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
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
- As react js is one of the widely used frontend js framework, the adoption of react-native was quick for react js developers.
- 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
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
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
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.
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.