vnovick/whatsapp_workshop

Instructions

First of all I'd like to welcome you to this workshop. In this hands-on workshop we will get through almost the full lifecycle of creating Whatsapp-like app in React Native from prototyping phase to fully working app.

Topics we will cover include:

• How React Native works under the hood
• Best practices of getting started with new React Native app.
• Overview of developer tools and debugging tips and tricks
• Core components in React Native
• Images and SVG Icons in React Native
• Styling your mobile app using flexbox with yoga layouting engine
• Prototyping our app structure by building navigation workflows with react-navigation
• Navigation tips and tricks
• GraphQL overview and how we can get started with GraphQL in our React Native apps
• Modeling our API with Hasura free and open source engine
• Adding realtime capabilities to our app
• Different ways of adding Animations in React Native whether it's microinteractions or more complex behaviors

This is a huge list of things that we will go through during workshop so before it starts we need to be sure all required software is installed so we can get to the point from the very beginning.

Having your Machine Ready - 3 Easy Steps

You'll be able to write React Native code for either iOS, Android, or both. Let's make sure your machine is ready to get rolling.

It's important that you are able to run a "Hello World" app BEFORE this workshop, even if you're not familiar with the steps.

We'll go over all the tools you've installed, but for now let's get you setup. If these steps seem rudimentary, then good! That's why we want them out of the way before the workshop. If these tools are new to you, please spend some time familiarizing yourself as we will mention but not go into detail on their exact use.

1. Git/GitHub source control

This part isn't critical, but we'll be occasionally pushing our code to a repo in the demo. If you would like to follow along with those steps, be sure to have a GitHub account and install Git for your OS.

Installing Git: https://www.atlassian.com/git/tutorials/install-git

2. React Native - using Native

There is a quick-start and there is a native code start. We'll be using the native-cli option. I will showcase also Expo option, but it's important you to get native-cli working before the workshop

The directions can be found here: https://facebook.github.io/react-native/docs/getting-started.html

Please click the native tab and follow the steps provided.

React Native CLI Quickstart

3. Hello World - Goodbye World?

Each of the directions above, ask you to generate "AwesomeProject" and run it. If you've done that you're ready for our workshop!