DEV Community

Cover image for Please Do Not Read: Expo

Posted on

Please Do Not Read: Expo

Welcome back, coders. I have an important announcement to make concerning previous posts about toy problems and all future posts. For the time being, the past blogs on this account will be taken down for legal purposes. And future blogs will be written about cool new technologies that I have been working on. Sorry for the sudden change in topics, and I hope you will still read my blogs. Let us give a farewell salute to the old toy problems, and begin with this week's blog!

My blog for this week will be about Expo, a cool framework and platform for universal React applications. A very popular use for Expo is mobile development. And this blog will introduce you to Expo, as well as getting started!

The features of Expo are built around Reactive Native, and they utilize JavaScript, which we have played around with in the toy problems. To get started, you must first update your node to a version that is compatible with expo. A safe version of Node.js to use would be the latest stable. You can run this line to check which version of Node.js that you currently have to adjust accordingly:

nvm --version

For additional instructions on how to install a specific version of node, you can run this line:

nvm --help

So after installing that version of node, we can finally set up expo. We must first install expo:

// Install the command line tools
npm install --global expo-cli

Once you have installed expo, you can now create an expo project! This expo project will contain basic templates that you may choose from to get started with your application. You may choose from blank templates or templates that have some basic tabs, routing, and buttons. You can create it by running this line:

// Create expo project with name "my-project"
expo init my-project

And of course, you can change "my-project" to whatever name you would like. After creating your expo project and selecting your template, you can go ahead and change directory to your project.

// Change directory
cd my-project

Once inside of your project directory, you can start up the app!

// Start the app
expo start

Now, a few things will pop up in your terminal after running that line. You'll see a few messages about Expo tools running on your localhost, and then a giant QR code will appear. After that, a set of instructions will appear under the QR code that will enable live reloading. This is what it should look like:
Alt Text
Also, your browser should open to a page with a similar setup, where you can see our application compile, as well as some simulators your can choose from on the side. A QR code should appear on the bottom left corner as well. And if you want to download the mobile application(IOS and Android are compatible), you can even run the application directly through your phone!

And now, you have a fully functional expo application to start building from! I highly recommend checking out the expo docs for all of the cool features and APIs they have.

And that is all! Thank you for reading my guide to setting up Expo! If you run into any issues about the set up, please let me know in the comments below. And again, sorry for the sudden change in themes. I will keep you all updated on the toy problems, and I will see you all next week for another blog!

Top comments (0)