Get Started With Expo

After playing with React Native for two weeks, I realized that the development tools are not stable yet — particularly on Windows — in that, I keep receiving platform-level errors and compatibility issues. I reckon that is because there are too many layers in the stack. But anyway, as a result, I cannot focus on the development of my project.

I recently start trying this tool, called Expo, in hope that it can remove the obstacles in my way. If you pey attention, you would have already found it from React Native’s official site, it is used to host and demo the snippets of React Naive code in the pages of documents.

expo-on-rn--doc-page.png

Here is its website:

expo.png

It does support online compiliation and building, and you can run the project in the wrapper app of Expo on your mobile device.

Before you can start, you really need to sign up.
signup.png

I signed with Github account.

After installation, the first start-up of the XDE looks like:

startup-XDE.png

Log in, create a new project:

new-proj.png

template.png

run-new-pro.png

The left pane is called packager console, sort of the counterpart of the cmd window where you run React Native CLI.

Launch Genymotion, and afterward the option of Open on Android will be available:

run-android.png

Run on Android, for the first time, you would see:

1st-run-011st-run-02

Now you can play with the app in the Android emulator:

right-pane.png

The right pane is a console to display device logs. The messages are displayed after I navigate to another tab, and they look like the data kept in the store of Redux.

The new project’s path is under the installation directory of Expo

pro-dir.png

Open the root folder in VS Code, and change the content of the home screen:

 

 

change-content.png

And saving the changes will automatically trigger rebuilding:

saving.png

You can also download Expo app on your mobile phone, and run this project from it, which I will go over shortly.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s