Jacob Astar

Camp Counselor

Building Tic-Tac-Toe with React Native

Event Logo

Tuesday, January 18, 2022 - 8:30 PM UTC, for 1 hour.

AT THAT (In-Person Only) Regular, 60 minute presentation

Room: Salon H

ReactJS
ReactNative
Javascript
MobileDevelopment

React is a Javascript library (not a framework) that allows developers familiar with Javascript or Typescript to build powerful client side rendered web applications. In 2015, Facebook, the creators of React, released React-Native, another library that combines all the best features of React, with the ability to create cross platform applications. What this means is that using one codebase, written in Javascript or Typescript, you can create an application that when compiled, will run natively on Apple, Android, Windows, and the web! In this activity, we will talk through what React is and what makes it special before introducing React-Native. Together, we'll then build a mobile game, Tic-Tac-Toe, which will demonstrate all the major elements found in React: JSX, Functions, Props, State, Hooks, and more. Much like how React-Native is used to build cross platform applications, you can develop and test React-Native applications on nearly any platform too. This includes Windows, Mac, and many Linux distros. To help us with testing, we'll be using a Javascript library called Expo. What Expo does is let us build our app and then view it on our mobile device. As we make changes to the code, Expo refreshed the app and we can see these changes on our device using a companion app called Expo Go, which is available in both the Apple App Store and Google Play. This speeds up development and removes the need for emulators, which is especially handy in scenarios such as developing for iPhone when you work on a windows machine. At the end of this presentation, you'll had a solid understanding of the benefits of React and React-Native, as well as a functioning tic-tac-toe game complete with the ability to place X's and O's, and determine a winner. As an hour long presentation, we'll have to move fast, but don't worry because all of the code will be available on Github prior to the presentation. This will include the complete game, a starter template (Because creating the project is often the hardest step) as well as instructions to set up Expo. Don't worry if your not an Javascript pro, you don’t be to be to understand what we'll be discussing. Any experience in a modern programming language is more than an enough! Looking forward to seeing you there!

Prerequisites

Basic knowledge in an object oriented programming language, C#, Java, Python, JavaScript. The code in the presentation will be in JavaScript, but it’s not mandatory.

Take Aways

  • Basic understanding of React and React Native concepts
  • Benefits of React Native for mobile development
favorited by: