React Native – Learn the Basics – Part 1

Hello Readers, CoolMonkTechie heartily welcomes you in this article.
In this article, we will learn about the React Native Basic. We will discuss  about react native basic through examples. This is Part 1 for React Native Basic.A famous quote about learning is :

“I am still learning.”

Learn_basic_part_1


React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, we need to understand some of the basic React concepts, like JSX, components, state, and props


If we already know React, we still need to learn some React-Native-specific stuff, like the native components.


Let’s do this thing.

Hello World

import React from 'react';
import { Text, View } from 'react-native';

function HelloWorldApp() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      Hello, world!
    
  )
}
export default HelloWorldApp;

What’s going on here?

  1. First of all, we need to import React to be able to use JSX, which will then be transformed to the native components of each platform.
  2. On line 2, we import the Text and View components from react-native
Then we find the HelloWorldApp function, which is a functional component and behaves in the same way as in React for the web. This function returns a View component with some styles and aText as its child.
The Text component allows us to render a text, while the View component renders a container. This container has several styles applied, let’s analyze what each one is doing.
The first style that we find is flex: 1, the flex prop will define how our items are going to “fill” over the available space along your main axis. Since we only have one container, it will take all the available space of the parent component. In this case, it is the only component, so it will take all the available screen space.
The following style is justifyContent: “center”. This align children of a container in the center of the container’s main axis and finally we have alignItems: “center”, which align children of a container in the center of the container’s cross axis.React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. importfromclass, and extends in the example above are all ES2015 features.

The other unusual thing in this code example is Hello world!

This is JSX – a syntax for embedding XML within JavaScript. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like <div> or <span> you use React components. In this case, <text> is a Core Component that displays some text and View is like the <div> or <span>


Conclusion

In Part 1, We have discussed about React Native Basic through example explanations. In next part, We will learn about React Native Basic like Components,Props and State with examples.

Thanks for reading ! I hope you enjoyed and learned about React Native Basic Concepts. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s