-
Notifications
You must be signed in to change notification settings - Fork 0
React Tutorial
This guide gives a brief overview of the basics of React and React Native. For more in depth material, see the React / React Native documentation:
React is a JS library for creating user interfaces; it allows us to break our UI down into smaller, isolated "Components", and add "reactivity" to our web pages.
React Native allows us to build cross-platform mobile apps using React.
Elements describe what you want to see on the screen; they are the most basic blocks of React applications.
const el = <p>Hello World!</p>;React components are reusable pieces of code that return elements to be rendered to the page.
function HelloWorld() {
return <p>Hello World!</p>;
}Components should represent a part of the app that is used multiple times; for example, a message:
type MsgProps = {
title: string,
body: string,
};
function Message(msg: MsgProps) {
return (
<div>
<h1>{msg.title}</h1>
<p>{msg.body}</p>
</div>
);
}Props represent data that is passed down from a parent component to a child component. Props are read-only.
type Props = {
world: string;
};
function HelloWorld(props: Props) {
return <p>Hello, {props.world}</p>;
}const el = <HelloWorld world="World" />Hooks are function that let you "hook into" React's state and lifecycle feature from functional components.
React provides a number of built-in hooks such as useState and useEffect.
The state of a component represents data that changes over time. We can
use the useState hook to provide state to our components.
Consider the following example:
import React, { useState } from 'react';
function Counter() {
// Declare a new state variable
const [count, setCount] = useState<number>(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}The state variable count is updated each time the button is clicked.
Effects, or Side Effects, are operations that affect other components and
cannot be done during rendering. This includes operations such as fetching
data from an API, or manually updating the DOM. We can use the useEffect
hook to perform these.
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
subscription.unsubscribe();
};
},
[props.source],
);As seen in the example above, the useEffect hook takes 2 parameters:
a function that performs the operation, and an array of values that the
effect depends on.
The operation function can return clean-up function which runs before the component is removed from the UI.
By default, useEffect runs after every render, unless
it has provided dependencies. In this case, it will only run when one of its
dependencies changes.
React Native is very similar to React; however, in order to provide
cross-platform support, It has a number of components that map to the
native view for each platform. For Example, the React Native
component View, maps to UIView for IOS, <div> for web, and android.view
for android.
Below is an example using the Counter component example from the state section:
import React, { useState } from 'react';
import {View, Text, Button} from 'react-native';
function Counter() {
// Declare a new state variable
const [count, setCount] = useState<number>(0);
return (
<View>
<Text>You clicked {count} times</Text>
<Button onPress={() => setCount(count + 1)}>
Click me
</Button>
</View>
);
}See React Native's core components and APIs docs for more details on the available components.
The following is a list of useful references and links about React & React Native.