Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

React Native Learning

This document serves as a tutorial for learning React Native, emphasizing the need to understand basic React concepts such as JSX, components, state, and props. It introduces the creation of a simple 'Hello, world!' app and explains the roles of components, props, and state in React Native development. The document also highlights the similarities in state management between React and React Native, providing code examples for both frameworks.

Uploaded by

rizwan ijaz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

React Native Learning

This document serves as a tutorial for learning React Native, emphasizing the need to understand basic React concepts such as JSX, components, state, and props. It introduces the creation of a simple 'Hello, world!' app and explains the roles of components, props, and state in React Native development. The document also highlights the similarities in state management between React and React Native, providing code examples for both frameworks.

Uploaded by

rizwan ijaz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

1.

Learn the Basics


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, you need to understand some of the basic React concepts, like JSX,
components, state, and props. If you already know React, you still need to learn
some React Native specific stuff, like the native components. This tutorial is
aimed at all audiences, whether you have React experience or not.

Let's do this thing.

2. Hello World
In accordance with the ancient traditions of our people, we must first build an app
that does nothing except say "Hello, world!". Here it is:

If you are feeling curious, you can play around with sample code directly in the
web simulators. You can also paste it into your App.js file to create a real app on
your local machine.

3. 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 define 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 your 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 aligns children of a


container in the center of the container's main axis. Finally, we have alignItems:
"center", which aligns children of a container in the center of the container's cross
axis.

Some of the things in here might not look like JavaScript to you. Don't panic. This
is the future.

First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript


that is now part of the official standard, but not yet supported by all browsers, so
often it isn't used yet in web development. React Native ships with ES2015
support, so you can use this stuff without worrying about
compatibility. import, export, const and from in the example above are all ES2015
features. If you aren't familiar with ES2015, you can probably pick it up by
reading through sample code like this tutorial has. If you want, this page has a
good overview of ES2015 features.

The other unusual thing in this code example is <View><Text>Hello


world!</Text></View>. This is JSX - a syntax for embedding XML within
JavaScript. Many frameworks use a specialized templating language which lets
you embed code inside markup language. 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>.

4. Components
So this code is defining HelloWorldApp, a new Component. When you're building a
React Native app, you'll be making new components a lot. Anything you see on
the screen is some sort of component.

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

Your own components can also use props. This lets you make a single
component that is used in many different places in your app, with slightly different
properties in each place. Refer to props.YOUR_PROP_NAME in your functional
components or this.props.YOUR_PROP_NAME in your class components. Here's an
example:

 TypeScript
 JavaScript

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, you can build a
wide variety of static screens. To learn how to make your app change over time,
you need to learn about State.

6. 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.

7. What's the difference between state and props in React?

In a React component, the props are the variables that we pass from a parent
component to a child component. Similarly, the state are also variables, with the
difference that they are not passed as parameters, but rather that the component
initializes and manages them internally.

8. Are there differences between React and React Native to handle the
state?

tsx
// ReactJS Counter Example using Hooks!

import React, {useState} from 'react';

const App = () => {


const [count, setCount] = useState(0);

return (
<div className="container">
<p>You clicked {count} times</p>
<button
onClick={() => setCount(count + 1)}>
Click me!
</button>
</div>
);
};

// CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}

tsx
// React Native Counter Example using Hooks!

import React, {useState} from 'react';


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

const App = () => {


const [count, setCount] = useState(0);

return (
<View style={styles.container}>
<Text>You clicked {count} times</Text>
<Button
onPress={() => setCount(count + 1)}
title="Click me!"
/>
</View>
);
};

// React Native Styles


const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});

As shown above, there is no difference in handling


the state between React and React Native. You can use the state of your
components both in classes and in functional components using hooks!

In the following example we will show the same above counter example using
clas

You might also like