React Tutorial - SeoulSKY/safe-zone-system GitHub Wiki

The Basics of React / React Native

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:

What is React / React Native?

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.

Index

React Terminology

Elements

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>;

Components

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

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

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.

State

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

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

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.

References

The following is a list of useful references and links about React & React Native.

⚠️ **GitHub.com Fallback** ⚠️