TechnologyUncategorized

React Native Tutorial

React-Native

 

Node Installation:

 

First of all, To start with any React native You need to install node in your windows/mac pc.

The steps for installation are as follows:

 

Step1:    Go the website https://nodejs.org/en/download/ and download windows installer(.msi) 32

       bit/ 64 bit accordingly.

Step2:    Now install the NodeJs from the downloaded folder.

Step3:    After inatalling NodeJs,Craete a new folder with any name say “React_native”.

Step4:    open terminal(Mac)/Cmd(windows) and and go to the path for the folder you have created and type the

       following command:

 npm install -g react-native-cli

Wait for the installation to be completed…

You have successfully installed nodeJs in your Pc and now can create your React-native project.


 

Project Creating in React-Native:

To create any new project, you need to perform following steps each and every time:

Step1:    Create a folder say, “Project”.

Step2:   Go to the terminal/cmd, in terminal go to the path of your folder you have just created and type the following

       command:

react-native init AwesomeProject

This will start the of gathering all the initialization components and files needed to create the React-native project,.

wait till the process completes, it will take some time.


 

Running your Project:

To run your project, you need to setup the following things.

You must have installed simulators for ios device/Android device.

Go to the terminal/cmd and reach to the path of your project and type the following command:

react-native run-ios or react-native run-android   (accordingly).

And then it will build your project and the simulator will be automatically opened and your application(Project) will be started installing, then, launching and finally you got it running on the simulator.

You can also run your project using XCode. You can download Xcode from …….link…….

After downloading XCode, open it, click on “file”, then choose “open” and select your project and let the indexing of your project files be completed.

Then, ……..


 

Starting with the first Application:

To start with your first Application open your Text-Editor say, Sublime.

Open the “File” menu and click on “open” and select your project.

Now there, you will find many folders and files have been created.

The common folders for any project are: android, ios, node_modules and

Among which, you will find “App.js” file.

In React-native project, “App.js” is the main file where you have to put the content that to be displayed on your device.

 

Now let’s start creating your first app.

For any application, there will be mainly three sections: import, class, and style.

_____________________________________________________________________________________________________________________________________

import React, { Component } from ‘react’;                                   

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

//Here We are importing the basic components from react and react-native and these two lines are common for any application.

export default class HelloWorldApp extends Component {

render() {

       return (

             Content goes here….

         );

  }

}

//In this section, the first line is for creating class that will hold the content,the “helloworldApp” is the class name.

    between the two curly braces, there is a render function which makes your content display on the screen.

    within the render function, there is a return function which holds the data that to be displayed on the screen.So anything that to        be displayed on the  screen , you need to put that in the return function.

const styles = StyleSheet.create({

bigblue: {

color: ‘blue’,

fontWeight: ‘bold’,

fontSize: 30,

},

red: {

color: ‘red’,

},

});                                                                                    //In this section, we are defining styles for the components.

const styles = StyleSheet.create({ }) is for creating the stylesheet that will contain the styles for various components.

between the two curly braces, you can define styles like we have defined the bigblue and the red and you need to take care of the braces, commas, colons, semicolons we are using.

__________________________________________________________________________________________________________________________________

Note: In Html, we have used <Div></Div> but in react native we will use <View></View>, it works same as <Div></Div>

__________________________________________________________________________________________________________________________________

Let’s display something on your screen.

                  <View>

                      <Text>Hello world!</Text>

                 </View>

 

To display any text on your screen you need to write your text between <Text> and </Text>  and you will put that between <View></View> as above .

There are many tags and componentts in react native like <Text>,<textInput>,<TouchableOpacity>,<Checkbox> etc. which you can learn from https:// facebook.github.io/react-native/docs/tutorial and https://nativebase.io/ .

 

The code to display the text on your screen will be as follows:


import React, { Component } from ‘react’;

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

 

export default class HelloWorldApp extends Component {

render() {

   return (

     <View>
          <Text>Hello world!</Text>
     </View>

   );

}

}

This will display “Hello world!” on your screen, for now here we have not defined any style.


To give style to the components, there are mainly three ways:

Inline styling:

<Text style={{color:”red”, fontSize:20}}>Hello world!</Text>.

Your style will be between style={{ }} and take care of the default naming convensions like “fontSize”,”backgroundColor” ,etc.


Creating StyleSheet:

import React, { Component } from ‘react’;

import { StyleSheet, Text, View } from ‘react-native’;

export default class LotsOfStyles extends Component {

  render() {

    return (

      <View>

        <Text style={styles.red}>just red</Text>

        <Text style={styles.bigblue}>just bigblue</Text>

      </View>

      );

   }

}

const styles = StyleSheet.create({

bigblue: {

   color: ‘blue’,

   fontSize: 30,

},

red: {

   color: ‘red’,

},

});


Creating a separate styles.js file:

You can also create a separate file and put your style in that file and then import it into the App.js file as follows:

Step1:    Create styles.js file

Step2:    write the code as follows:

 

export default {

container:{

                           backgroundColor:’#ffffff’,

                  },

                  Icon :{

                         fontSize : 100,

                  },

                  ListItemBody:{

                         flex: 1,

                        justifyContent: ‘center’,

                        alignItems: ‘center’,

                  },

                  Inputs:{

                           marginRight:20,

                           marginLeft:20

                  },

}

your style will be between export default { }.

Now you need to import the styles.js file in your App.js file.


import React, { Component } from ‘react’;

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

import styles from ‘./styles’;    

                                                             //Here styles is the name of the file and ‘./styles’ is the path for the styles.js file

export default class HelloWorldApp extends Component {

render() {

return (

<View>

<Text>Hello world!</Text>

</View>

);

}

}

Leave a Reply

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