Hand’s on React-Native by Codedady Session 1​

Why it is so confusion in choosing a development platform for Mobile App development ?

Looking towards the platforms, Android and iOS are the most popular Mobile OS’s used my 90% of the globe. Apart from separated native development for iOS and Android there are more reliable and resource full cross-development platform like React-Native, Flutter etc. are fulfilling the world of mobile app development. Let’s talk about React Native here.

React Native is a framework developed by Facebook for creating native apps for iOS and Android under a single code base.  React Native can now render mobile UIs for both platforms.

React Native lets you build mobile apps using JavaScript. It is similar as React, letting you compose a rich mobile UI using reusable components.

I know what you are thinking? Okey here the answer for your question

  • The apps you are building with React Native aren’t mobile web apps because React Native uses the same fundamental UI building blocks as regular iOS and Android apps.
  • Instead of using Swift, Kotlin or Java, you are putting those building blocks together using JavaScript and React.

1. Single code for both iOS and Android.
2. Reusable componets render natively through out App.
3. One of the most resource full cross developement platform
4. Easy UI integration at its maximum

Lets build our first react-native app

Open your terminal and init your app

react-native init ==your-app-name==

This was the initialization part of you react-native app

Now let’s drag the project folder to a code editor (Atom/Vscode Highly recommended).

On your project, Open the `index.js` file.

See, here
import App from ./App
Specify your initial route as App.js

Let us change the initial route to a new file, create a new file in your project root folder and name it as `newfile.js`

Now in your `index.js` change `import App from ‘./App’;` to `import App from ‘./newFile’;`

Here we set the initial route of the app to `newFile.js`

Now let us write some code, believe that coding is fun.

In your `newfile.js`

import React, { Component } from ‘react’
import { Text, View } from ‘react-native’

export default class NewFile extends Component {

render(){
return(

<View style={{ flex:1,
backgroundColor: ‘black’,
justifyContent:’center’,
alignItems: ‘center’
}}>

<Text style={{color:’white’}}>Hello World, BOOM!!!</Text>

</View>
)
}

}

BOOM!! Your app is ready.

Let us run the code now, Open your terminal and run the command below

For iOS
> react-native run-ios
For Android (connect a physical device to your computer via USB)
> react-native run-android

welcomes you to the world of mobile app development.

for more and build yourself something awesome

We can talk more about react-native development in next session.

Hire React Native Developers for Your Mobile App Development

Want to develop an highly reliable mobile application with the React Native? Codedady developers can help you and relieve the burden of building and maintaining your own in-house team of react-native developers.Our developers are updated with latest trends,tools,frameworks and will assist you with your projects.

Leave a Reply

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