React Native Zero To Hero | Part-1

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.

React Native Zero to Hero | Part-1

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

omkar yadav Written by:

@omi10859 Omkar is a geek, love to know more about things going around, In his free time he loves to watch Sci-fi and talk about impossible.

18 Comments

  1. September 11, 2018
    Reply

    Great post. I was checking continuously this weblog and I am impressed!
    Extremely useful information particularly the last part 🙂 I handle such
    information much. I used to be seeking this certain information for
    a very lengthy time. Thanks and good luck. http://www.mbet88vn.com

  2. September 17, 2018
    Reply

    Excellent site you’ve got here.. It’s hard to find excellent writing like yours these days.
    I truly appreciate people like you! Take care!! http://hash.to/I1H.info

  3. September 17, 2018
    Reply

    These can be SEO, article marketing, blogs, banners, and link
    coach transfers. Such forums have a high Pagerank, and are themselves considered authority site.
    Process again takes several time. https://918kiss.host/69-ace333

  4. September 18, 2018
    Reply

    Hey there just wanted to give you a quick heads up.
    The words in your article seem to be running off the screen in Firefox.

    I’m not sure if this is a formatting issue or something to do with internet
    browser compatibility but I figured I’d post to let you know.
    The layout look great though! Hope you get the issue resolved soon. Kudos http://keo365.com/the-thao

  5. September 19, 2018
    Reply

    Someone essentially assist to make significantly articles I’d
    state. This is the first time I frequented your website page and
    up to now? I amazed with the research you made to make this actual publish incredible.
    Wonderful process! http://cado789.com

  6. November 8, 2018
    Reply

    I do not want to lose you beside me. Because I love you. I’m in my sleep you are in my mind. When the day is coming apart we may be overwhelmed. I want to be my life forever with you.guys this is my love story. guys i really love him.if you want to know me more kindly visit me here.

  7. November 8, 2018
    Reply

    It’s onerous to find knowledgeable folks on this topic, however you sound like you realize what you’re speaking about! Thanks kindly visit us

  8. November 8, 2018
    Reply

    Valuable info. Lucky me I found your web site by accident, and I’m shocked why this accident did not happened earlier! I bookmarked it.i want to invite all of you to visit my site.

  9. November 8, 2018
    Reply

    Great internet site! It looks really expert! Sustain the helpful work!

  10. November 20, 2018
    Reply

    My relatives always say that I am killing my time here at net, except I know I am getting familiarity daily by reading such good articles.

Leave a Reply

Your email address will not be published. Required fields are marked *