Summary - React Native basics

Combine View, Text and App.js to write your first mobile app.

Summary - React Native basics

In this group you learned what React Native is, how to create a project with Expo, the View and Text components, the App.js skeleton, and the npx expo start command.

You can now open an Expo project, write a basic screen, start the server, and view it on a phone with Expo Go.

Let us combine all of this in a single app.

Exercise Write a complete App.js

Write a complete App.js: import View and Text from react-native, and with export default function App() return <View> containing <Text>React Native</Text>.

Show example solution

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

export default function App() {
  return (
    <View>
      <Text>React Native</Text>
    </View>
  );
}

Exercise Two-line welcome

Write an App component; inside a <View> place two <Text> elements: the first says Welcome, the second says React Native. Do not forget the import.

Show example solution

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

function App() {
  return (
    <View>
      <Text>Welcome</Text>
      <Text>React Native</Text>
    </View>
  );
}

export default App;

Test yourself

Which file is the app entry point?
- App.js
- package.json
- app.json
- index.html
Show answer

App.js — App.js holds the entry component.
Match all the basic concepts

react-native

Core package
Expo

Framework
App.js

Entry component
npx expo start

Server

Next lesson: What is JSX?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies