Complete guide to React Native Fundamentals


Now here is an interesting problem; we have come across this great framework for making fast differences between the Virtual DOM and its native components. How do we tell React Native what UI to represent or when to change it? A React Native component is a simple, reusable, function-like object that enables us to describe the native mobile components we want to render. They will always contain properties, state, and a render method. Let’s start really simple by creating our own component.

Creating your first component

Creating a new component in React Native will look similar to the following:

import React, {
  } from 'react-native';
class HelloComponent extends React.Component {
  render () {
    return (
      <Text>Hello React</Text>


Remember to import the React Native module. Here, we are using the ES6 import statement; it is similar to how the node require module works.

Wait a second… What are these weird XML elements doing in my JavaScript code? Facebook has created its own syntactic extension over JavaScript to describe React components. Here is the exact same code, but written in ordinary JavaScript:

var HelloComponent = React.createClass({displayName: "HelloComponent"}, render: function () {
  return (
    React.createElement(View, null,
      React.createElement(Text, null, "Hello React")

While it is possible to write React Native applications only in JavaScript, the previous syntax includes many added benefits for the developer.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest