React Native Zero To Hero | Part-1

Omkar Yadav
Sep 9, 2018 · 3 min read

Hello,

Welcome to my new blog techOxicated.
I will try to keep posting at least one blog post every week so let’s go…

This post is a series of the blog post in which I will try to share my experience with react-native.

So, what exactly is react-native and why we should learn this 🤷🏻‍♂️

React native is a javascript framework for mobile development. Its an open source project by facebook.

If you are familiar with web development react-native will be an easy task for you, and if know reactJs you are already a mobile developer 😉

React-native apps are native they are not hybrid, webapps and all that, but how exactly react-native do that React-native under the hood uses some state of the art technology to convert your javascript code to Java and XML for Android and Swift and C++ for iOS so you can use same code base to develop for both platforms ios and android and you can also use native code if you want, like for example, you want to develop some feature just for android go ahead its easy to do.

How do we run/make apps in react native?

Let’s suppose you are convinced and want to continue on how you can make apps using react-native.

Things you need to have

There is an easy way to install all that http://facebook.github.io/react-native/docs/getting-started.html follow the link to know how you can set up all this on your machine

Let’s hope you done with setting up if not, search the web or you can ping 😉

open a terminal and write this:

react-native init AppName

this will create your project folder with all import files needed

Files structure will be something like this

  • package.json: This file will have all dependencies for project
  • index.js: Just like index.html index.js is an entry point for the project we don’t generally edit/update this file
  • App.js: This is the file we need to change to get update App
  • ios: This folder contains all ios code
  • Android: This folder contains all android code
  • ignore all other for now

Where to run:

You need to run an emulator or connect a physical device

After doing so you are ready to go (some steps are missing)

Ready?

Yes, you are now a mobile developer.

cd AppName

react-native run-ios //for ios

react-native run-android //for android

wait for a while and yeah its done good job!!

Hello World

Change App.js to

import React, {Component} from ‘react’;
import {Platform, StyleSheet, Text, View} from ‘react-native’;
export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}>Welcome to React Native!</Text> <Text>Hello World </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', },

});

Go to emulator and press command/ctrl + r to reload the code and boom!!

Still, Have Questions ask in the comments below. Thanks


Originally published at blog.omkar.site.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade