02 React Native Intro

React Native

React N History

• Initial release: 2015
• Facebook and community
• Open source project - https://github.com/facebook/react-native
• Under active development, release branch every two weeks
• Currently ver 0.6X

React N vs React

• React Native is like React, but it uses native components instead of web components as building blocks.
• UI is rendered using platform native components - buttons, lists, navigation view, etc.
• Uses the same concepts, as React – JSX, components, state, props.
• Main language is JS – ES2015/ES6

React N – Hello, world! (class)

React N - installation

• Two ways to start development – Expo or CLI
• Expo – more handholding, less components, less possibilities, for newcomers. Requires only Node.
• CLI – full experience, somewhat complicated. Requires lots of external tooling.

React N - CLI

macOS

• Node, Watchman, CLI, JDK, Android Studio, Xcode for iOS

Windows

• Node, CLI, Python2, JDK, Android Studio

Linux

• Node, CLI, JDK, Android Studio

Find exact instructions at

• https://reactnative.dev/docs/getting-started
• https://reactnative.dev/docs/environment-setup (CLI for this course)

React N – First Project

Init project

npx react-native init RNTest01

Run it

cd RNTest01
npx react-native start
npx react-native run-android
npx react-native run-ios

React N - IDE

• VS Studio Code
  • React Native Tools
    https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native
    https://github.com/microsoft/vscode-react-native

React N - TypeScript

npx react-native init RNTest02 --template react-native-template-typescript

React N – Basic TS app

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

const App = () => {
  return (
    <View>
      <Text>Hello!</Text>
    </View>
  );
};

export default App;

React N – Basic TS app 2

import React from 'react';
import { Hello } from './components/Hello';

const App = () => {
    return <Hello title="mr">Andres</Hello>;
};

export default App;

React N – component

import React, { type PropsWithChildren } from 'react';
import { Text, View } from 'react-native';

export const Hello: React.FC<
    PropsWithChildren<{
        title: string;
    }>
> = ({ children, title }) => {
    return (
        <View>
            <Text>{title}</Text>
            <Text>{children}</Text>
        </View>
    );
}