React Native, Day 4, Breaking down code structure

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-maparray-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


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

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.

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:

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:

What?

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.

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.:

The complete App.js file looks like this:

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:

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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.