Complete guide to React Native Fundamentals

Components

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, {
  Text,
  View
  } from 'react-native';
class HelloComponent extends React.Component {
  render () {
    return (
    <View>
      <Text>Hello React</Text>
    <View>
  );
  }
}

Tip

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.

Recommended :  How to Deal with same-origin policy restriction in angularjs

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.



Pin It on Pinterest

Shares
Scroll Up

Get the best in web dev

Join dunebook.com and recieve best in web dev , once a week FREE

An email has been Sent to your Inbox ! Please Confirm your Subscription :)