Hello guys, hope you are doing good. It is suggested to have a look at previous tutorials:
React Native Day 1, Understanding Technology, Fundamentals and React
React Native Day 2, Creating first React Native App
React Native, Day 3, Running app on iOS simulator and exploring some cool stuffs
Please support us by comment, like and share our facebook page.
In this tutorial, we will learn below concepts:
Folder structure and modules.
Imports like importing React, { Component }, { View, Text} etc.
Subclassing/extending.
Styling using StyleSheet.create
Exporting – export default, to make our component importable.
Creating a component which contains basic text.
We will understand that JSX is mixing xml/html with javascript.
We learn about render() function.
Module Structure
In react native we have different classes in different files. These files then can be put into different folders. Basically we follow a module structure by grouping related javascript files in folder. We can then use app.js file to import them and reuse them.
Note : I will use this code for reference.

If you look at above folders structures node_modules contains sub modules. “react” module contains javascript files related to React library.
If you guys are coming from swift background you must have heard about swift high order functions like map, flatmap, filter etc. You want similar functionalities in javascript? Yes javascript have these functionalities in form of modules. Go to node_modules > array-filter. Similarly go to node_modules > array-flatten. Similarly we have array-map, array-filter etc.
I am not a javascript programmer & I have understood it my way, hope you guys also get some idea about modules. Now if i have to use these modules some where in my code, i have to import them as simple as it is.
app.json
This file is used to configure our project, for example the name, icon, loading(splash) screen. I tried to give my app some name for example “AwesomeProject”. I made changes in app.json file as below:
|
{ "expo": { "sdkVersion": "26.0.0", "name": "AwesomeProject" } } |
press “i” on command line to run my app and yeah there is the app name. In case you are not able to see it try pressing
command+d.

Note : If you are not aware of how to launch and run app on iOS simulator, please read it here.
Here is the complete details of what you can do with app.json file.
Let’s write some basic code:
Importing
|
import React from 'react'; |
Here we are creating a variable named React of ‘react’ library. By using this variable i will be able to use methods, properties of ‘react’ library.
Remind : React is a JavaScript library to create user interface. Let’s say you want to create some user interface with labels, text fields, alerts, buttons, square, circle, rectangle etc., then you can use this React library. React have components which can be rendered by calling render() method.
Subclassing or creating a Component Class
In javascript we can use component to create new components. We have the React variable and we can call React.Component to create new components. We subclass React.Component to create new components.
|
class App extends React.Component |
Here we are creating a new component named “App” by subclassing React.Component.
Rendering
We have subclassed React.Component but still we have not written any code related to user interface like label, text, button etc. So where to write code for it?
Here is the answer:
|
import React from 'react'; class App extends React.Component{ render(){ return (/*write piece of code related to UI*/) } } |
React components implement a render()
method that takes input data (generally JSX) and return what to display.
It was the basic building block to understand the structure of component in javascript.
Please support us by comment, like and share our facebook page.
Let’s explore it more with some more code in place:
|
import React from 'react'; import { Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } } |
What?
|
import { Text, View } from 'react-native'; |
This is called a member import in javascript. In depth and detailed articles are here and here.
This time we have provided proper code for creating some user interface using View and Text.
|
{ return ( <View> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } |
We are rendering a View which contains text. Let’s run it and see output:

So do not worry about the layout as we have not used any styles, so our text is overlapping with status bar.
Styling
Create style using StyleSheet.create() method. For example below code creates a style named “style1” which centers the content and provide background color to be white.:
|
const styles = StyleSheet.create({ style1: { backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
The complete App.js file looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
|
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default class App extends React.Component { render() { return ( <View style={styles.style1}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } } const styles = StyleSheet.create({ style1: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); |
Again gotcha, 😳 😳 !!!!
Now
What it have to do with our code? 😳 😳
If you see till now we have only created a component, we need to make it exportable so that it can be imported and run by npm.
The same code above can also be written as:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
|
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; class App extends React.Component { render() { return ( <View style={styles.style1}> <Text>Open up App.js to start working on your app!</Text> <Text>Changes you make will automatically reload.</Text> <Text>Shake your phone to open the developer menu. Running on simulator. Hello every one. </Text> </View> ); } } const styles = StyleSheet.create({ style1: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); export default App; |
Final output of app:

Conclusion:
We learned about folder structure and modules.
We need imports like importing React, { Component }, { View, Text} etc.
We learned about subclassing.
We learn about styling using StyleSheet.create
We learn about export default, to make our component importable.
We learn about creating a component which contains basic text.
We also understand that JSX is mixing xml/html with javascript.
We learn about render() function.
Happy coding!!! 🙂
Please support us by comment, like and share our facebook page.