|
|
|
In this tutorial, we will learn to develop a react native app with Expo toolkit.
|
|
|
|
|
|
|
|
React Native is a JavaScript framework for building native cross platform mobile apps.
|
|
|
|
Expo is a complementary toolkit for React Native. It offers many additional APIs and is very helpful for app development.
|
|
|
|
|
|
|
|
- [Chapter 1. Installation and setup](https://gitlab.hrz.tu-chemnitz.de/OpenASiST/openasist/-/wikis/Creating-a-React-Native-Project-on-Expo)
|
|
|
|
- Chapter 2. Project Initialisation
|
|
|
|
- Chapter 1. Setup and Project Initialisation
|
|
|
|
- Chapter 2. Structure and Views
|
|
|
|
- Chapter 3. React Component & Navigation
|
|
|
|
- Chapter 4. Working with APIs
|
|
|
|
- Chapter 5. React Styling and Design
|
|
|
|
- Chapter 6. Redux
|
|
|
|
|
|
|
|
# \
|
|
|
|
Chapter 1. Setup and Project Initialisation
|
|
|
|
|
|
|
|
#### Introduction
|
|
|
|
|
|
|
|
React Native is a JavaScript framework for building native cross platform mobile apps. Expo is a complementary toolkit for React Native. It offers many additional APIs and is very helpful for app development.
|
|
|
|
|
|
|
|
#### Setup Expo Environment
|
|
|
|
|
|
|
|
<span dir="">With Expo CLI, you just need a recent version of Node.js. You can download the latest version of Node JS for </span>[<span dir="">nodejs.org</span>](http://nodejs.org)<span dir=""> </span>\
|
|
|
|
\
|
|
|
|
<span dir="">Once Node.js is installed on the system, npm commands would work. Install the Expo CLI by using the following command.</span>
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
```
|
|
|
|
//Install Expo-cli from command line tools
|
|
|
|
npm install -g expo-cli
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Project Initialisation
|
|
|
|
|
|
|
|
</div><span dir="">You can simply initialise your project with the following command:</span>
|
|
|
|
|
|
|
|
```
|
|
|
|
//Initalizes your project
|
|
|
|
expo init TUC
|
|
|
|
```
|
|
|
|
|
|
|
|
![]()
|
|
|
|
|
|
|
|
The **Expo CLI** will ask you to choose a template. In this tutorial, we will select the **blank** template and write the code from scratch. These templates are useful, for example you can select the "**tabs**" one, if your app design has bottom tabs and you want to implement it by default in your app.
|
|
|
|
|
|
|
|
After project is created, you can navigate to the project directory.
|
|
|
|
|
|
|
|
```
|
|
|
|
//Navigate to project directory
|
|
|
|
cd tucT
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Start the Expo Server
|
|
|
|
|
|
|
|
You can start the expo server with the following command.
|
|
|
|
|
|
|
|
```
|
|
|
|
expo start //or npm start
|
|
|
|
```
|
|
|
|
|
|
|
|
<span dir="">Expo CLI starts Metro Bundler, which is an HTTP server that compiles the JavaScript code of our app using </span>[Babel](https://babeljs.io/)<span dir=""> and serves it to the Expo app. It also pops up Expo Dev Tools, a graphical interface for Expo CLI.</span>
|
|
|
|
|
|
|
|
#### Opening the app on your phone |
|
|
\ No newline at end of file |
