React Native – An Overview Of React Native Foundation

|

CoolMonkTechie

by

Hello Readers, CoolMonkTechie heartily welcomes you in this article.

In this article, we will learn about the React Native Foundation. We will discuss  about react native core concepts through examples. 

A famous quote about learning is :

” I am still learning. “

So Let’s begin.


What Is React Native ?

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" }}>
      <Text>
        Hello, world!
      </Text>
    </View>
  );
}
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. import, from, class, 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>.


React Native Fundamentals

React Native runs on React, a popular open source library for building user interfaces with JavaScript. To make the most of React Native, it helps to understand React itself.

We’re going to cover the core concepts behind React native :

  • Components
  • JSX
  • props
  • state


Components

So HelloWorldApp example code is defining HelloWorldApp, a new Component. When we’re building a React Native app, we’ll be making new components a lot. Anything we see on the screen is some sort of component.


JSX

React and React Native use JSX, a syntax that lets we write elements inside JavaScript like so: <Text>Hello, I am your cat!</Text>.

Because JSX is JavaScript, we can use variables inside it. Here we are declaring a name for the cat, name, and embedding it with curly braces inside <Text>.

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

const Cat = () => {
  const name = "Maru";
  return (
    <Text>Hello, I am {name}!</Text>
  );
}

export default Cat;

Because JSX is included in the React library, it won’t work if we don’t have import React from 'react' at the top of our file!


Props

Most components can be customized when they are created, with different parameters. These creation parameters are called props.

Our own components can also use props. This lets us make a single component that is used in many different places in our app, with slightly different properties in each place. Refer to props.{NAME} in our functional components or this.props.{NAME} in our class components. Here’s an example:

import React from 'react'; import { Text, View, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ center: { alignItems: 'center' } }) function Greeting(props) { return ( <View style={styles.center}> <Text>Hello {props.name}!</Text> </View> ); } function LotsOfGreetings() { return ( <View style={[styles.center, {top: 50}]}> <Greeting name='Rexxar' /> <Greeting name='Jaina' /> <Greeting name='Valeera' /> </View> ); } export default LotsOfGreetings;

Using name as a prop lets us customize the Greeting component, so we can reuse that component for each of our greetings. This example also uses the Greeting component in JSX. The power to do this is what makes React so cool.

The other new thing going on here is the View component. A View is useful as a container for other components, to help control style and layout.

With props and the basic Text, Image, and View components, we can build a wide variety of static screens. To learn how to make our app change over time, we need to learn about State.


State

Unlike props that are read-only and should not be modified, the state allows React components to change their output over time in response to user actions, network responses and anything else. Here’s an example:

import React, { Component } from 'react' import { StyleSheet, TouchableOpacity, Text, View, } from 'react-native' class App extends Component { state = { count: 0 } onPress = () => { this.setState({ count: this.state.count + 1 }) } render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button} onPress={this.onPress} > <Text>Click me</Text> </TouchableOpacity> <View style={styles.countContainer}> <Text> You clicked { this.state.count } times </Text> </View> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { alignItems: 'center', backgroundColor: '#DDDDDD', padding: 10, marginBottom: 10 } }) export default App;

In this example,

  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 StyleSheet , TouchableOpacity , Text and View components from react-native
  3. In next line , we defines a new class  App which extends from React Component .This block of code defines the components that represent the user interface.
  4. After that, we initialize  our app state variable count  to 0 inside App class using  state  variable.
  5. After that we create  onPress()  method where count  is incremented by 1 and count   value is set in  setState()  method.
  6. After that Inside render()  method that returns a react element , includes:
    • A  return()  that returns the result of layout and UI components.
    • A container View  that supports the layout accessibility controls. It is a fundamental component for building the UI.
    • A  TouchableOpacity  wrapper is used to reduce the opacity of button. Here, onPress method is called using onPress props.
    • A React component Text  for displaying text.
    • A property style  used for styling the components using  StyleSheet class.
    • A styles   is used to design individual components.
  7. After that, the  StyleSheet  class creates the style object that controls the layout and appearance of components. It is similar to Cascading Style Sheets (CSS) used on the Web.

That’s all about in this article.


Conclusion

In this article, We have discussed about React Native Foundations Concepts like Components,Props and State through example explanations. So we conclude that

  • Components : Everything is component in React Native.The way in which you create a new component.
  • Props : Most components can be customized when they are created, with different parameters. These creation parameters are called props.
  • State : State allows React components to change their output over time in response to user actions, network responses and anything else.

Thanks for reading ! I hope you enjoyed and learned about the React Native Foundation. 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 in the comment box.

Thanks again Reading. HAPPY READING !!???

Loading

Leave a Comment