Learn the Basics - React Native








React Native is like React, which uses native components instead of web components as building blocks. For understand the basic architecture of the React Native app, you need to know some of the core React principles, such as JSX, elements, state, and props. If you already know React, you still need to learn some React-Native-specific stuff, such as native components. The tutorial is intended for all viewers, whether or not you have React experience.


Let's just do this stuff.


Hello World Example:


In accordance with the ancient traditions of our people, we must first create an app that does nothing but say "React Native Example:Hello, world!" Here's the following:

import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>React Native Example:Hello, world!</Text>
        <Text>By Nawab Ahmad</Text>
      </View>
    );
  }
}

If you feel curious, you can play with the sample code directly in the internet simulators. You can also paste it to your App.js directory to create a real app on your local machine or try editing my code from here:nawabblog/Helloworldexamplecode.


So what's going on in here?


Some of the stuff in here might not make you look like JavaScript. Don't panic, man. It's the future.


First of all, ES2015 (also known as ES6) is a series of JavaScript enhancements that is now part of the official standard, but not yet accepted by all browsers, so often not used in web development. React native ships with support for ES2015, so you can use this stuff without thinking about compatibility. Import, Class, and Extend in the example above are all features of ES2015. If you're not familiar with ES2015, you might be able to pick it up by reading a sample code like this tutorial. If you want, this site has a good overview of the features of ES2015.

The other unusual thing in this sample code is < View><Text > React Native Example:Hello, world!< /Text></View>. This is JSX-a syntax for embedding XML into JavaScript. Most frameworks use a specific model language that lets you embed code inside the markup language. This is reversed in Respond. JSX lets you write the markup language inside the file. This looks like HTML on the internet, except that you use React components instead of web stuff like < div > or <span>. In this case, < Text > is an integrated element that shows some text and View is like < div > or <span>.


Components:


So this code identifies the new Component, HelloWorldApp. Once you create a React Native device, you're going to make a lot of new components. Anything you see on the monitor is a kind of part. The module can be quite basic-the only thing you need is a render function that returns some JSX to render.


Next what!!
To make components do more interesting things, you need to learn about Props.

0 views
Never Miss a Post. Subscribe Now!

Contact Us: nawabblog@gmail.com

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad