React Native shares similarities with React, but it diverges by employing native components as fundamental building blocks instead of web components. To grasp the fundamental structure of a React Native application, it's essential to familiarize yourself with core React concepts such as JSX, components, state, and props. Even if you're already well-versed in React, you'll need to acquire knowledge specific to React Native, particularly regarding native components. This tutorial caters to a wide audience, whether you have prior React experience or not.
So, let's dive right in!
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:
import React from 'react';
import {Text, View} from 'react-native';
const HelloWorldApp = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text>Hello, world!</Text>
</View>
);
};
export default HelloWorldApp;
App.js file to create a real app on your local machine.What's going on here?
- First of all, we need to import
Reactto be able to useJSX, which will then be transformed to the native components of each platform. - On line 2, we import the
TextandViewcomponents fromreact-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>.
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.
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:
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
center: {
alignItems: 'center',
},
});
type GreetingProps = {
name: string;
};
const Greeting = (props: GreetingProps) => {
return (
<View style={styles.center}>
<Text>Hello {props.name}!</Text>
</View>
);
};
const 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, 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.
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.
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.
Are there differences between React and React Native to handle the state?
// 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;
}
// 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 classes.
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><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;
No comments:
Post a Comment