React Native Day 1, Understanding Technology, Fundamentals and React

React Native have been created by Facebook. React Native is a great option for creating cross platform mobile apps. The code is written in javascript which is one of the trending programming language among developers. Code is reusable and can be used with android and iOS platforms with minimal efforts. It can use native controls also. It’s cost effective than compare to native mobile apps. React native uses asynchronous javascript for very responsive user interface. Some of the apps using React Native are:

  • Facebook
  • Instagram
  • Tesla
  • Skype

Note : React Native is not the replacement of native languages like Swift, Objective C or Java. But a added advantage to have.

For keeping learning curve easier I have separated React and Native. Firstly we will see very basic fundamentals of React & then we will continue with React Native.

Please support us by comment, like and share our facebook page.

The final source code file can be found here

What is React ?

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.

Component

These are soul of React. This is what user interacts with. Label, Text, Button, List, Tables etc all are the example of components.

React example
React example with line, triangle, square and circle. This user interface have 4 components.
React
React example with complex user interface.

Let’s see a simple example:

Download sublime text editor and paste above code. Save file as dayfirst.html. Now double click on it to open it and see it in browser. Attached is the screen shot:

Hello World Example
Hello World Example

Let’s break the code

<!DOCTYPE> declaration is not an HTML tag. It tells web browser that it is a html document.

html tag is the root tag of web document. It controls the structure of html doc.

It contains following informations:

  • Title of html document.
  • Scripts
  • Style sheets.

It tells the browser that utf-8 encoding is being used. This is the preferred encoding for emails and web pages.

In our code, we are importing React development library. This library is use to create user interface.

In our code, we are importing ReactDOM library. We use this library for rendering purpose (The actual output).

Very Important

In above both scripts we are importing react related functionalities. “react.development.js” is for react purpose only and it have nothing to do with DOM. Basically “react” and “react-dom” have their own functionalities like react can be used for creating components or writing JSX, while react-dom can be used for rendering purpose.

The methods imported from 'react-dom' are meant for interacting with the DOM. You are already familiar with one of them:ReactDOM.render().

The methods imported from 'react' don’t deal with the DOM at all. They don’t engage directly with anything that isn’t part of React.

To clarify: the DOM is used in React applications, but it isn’t part of React. After all, the DOM is also used in countless non-React applications. Methods imported from 'react' are only for pure React purposes, such as creating components or writing JSX elements.

We want our code to be run on all browsers with different – 2 interpreters. We are importing babel to achieve this. Babel is a JavaScript compiler.

The <body> tag defines body of html document. The <body> element contains below items:

  • Text
  • Hyperlinks
  • Images
  • Tables
  • Lists etc.

We use ReactDom library’s render message for rendering UI. The render method returns a description of what you want to render, and then React takes that description and renders it to the screen. In particular, render returns a React element, which is a lightweight description of what to render.

JSX

In the simplest words, JavaScript Extension (JSX) is a way to write html code with javascript.

In the above code we are passing a html parameter <h1>Hello World!</h1> in render method.

Component

In context of React <h1>Hello World!</h1> is a component.

Container

In simplest terms, we can use container to keep a reference to our components.

Code:

Output:

We can use container to update styles for example. Let’s use some styles also:

Output

That’s it for now. Will keep on posting 🙂

Please support us by comment, like and share our facebook page.

Happy coding! 🙂

 

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.