Skip to main content

tic-tac-node

Tic Tac Node: Working with React Native

I started working with React Native for the first time last night. Overall I've found it to be a fun experience. It's definitely a paradigm shift from Processing and Python, which I found fairly similar to one another in a lot of ways. But I've found React Native pretty approachable once I got over some initial barriers and definitely understand why developers enjoy using it!

Setting Up

One thing I appreciated about working with React Native was how easy it was to get things started. Based on some quick Googling, I decided to work with Expo and pretty much just followed the steps at https://expo.io/learn, except I skipped the first step, which was "fall in love." So basically, I just followed these steps:
  1. download and install the 8.12 LTS release of node.js*
  2. run npm install expo-cli --global in a terminal to get the Expo command line tool;
  3. run expo init tictacnode to initialize the new project,** then just cd into the project directory and run expo start to start the live-demo environment
  4. download and run the Expo Client on my Android phone. Then use the app to scan the QR code generated by Expo
  5. Start editing App.js and building the app!
A common theme I've noticed when working with development tools, especially on Linux, is instructions that make a ton of assumptions about the user and their work environment (of course you already have this special-use package manager that you've never heard of installed already, right? And of course you know what to do with this tar.xz file that apparently even Linux pros need to look up the command for each time!) but I found these instructions to be pretty much "as advertised" on both Windows and Linux. 

It sounds like some other folks in my class had issues getting things set up, so it seems I may have benefited from a fresh, clean install of Node.js (which seems to have been the cause of some problems for others). It also sounds like others in my groups are having issues on Mac, which I haven't tried. 

Starting a new project

Since I hadn't worked with any kind of JavaScript before, the templates (blank or tabbed) in Expo, which I think were from create-react-native-app, were really helpful in learning my way around. App.js looked a little different from the Python or Processing I was used to, but the live preview helped a lot - it makes it much easier to find your way around when you can see the code running live on the device. It quickly became a little bit addictive to press save and wait to see if my phone's screen would turn red (indicating an error) or show the changes I had intended to make. A great side effect of this was encouraging me to save my work way more often.

One mistake I made: I initially tried to split my three screens (a main menu/start screen, the player setup screen, and the gameplay screen) into different .js files (like I would split them into different .pde files in Processing) importing and exporting classes from them (a process new to me in JS and one I don't fully grasp yet) as needed. But I couldn't quite figure out how to access the same object from the different screens (for example, Player One needs to have their name set on the setup screen, and that same name displayed on the gameplay screen). I ended up just moving most stuff back to app.js, which results in a really long file but seems to be getting the job done.

I want to go ahead and press "publish" on this post before it gets too long. More details and examples on learning React Native and JSX in a future post coming soon! 

Popular posts from this blog

New Position with Chicago Metro History Fair

I'm excited to have begun a new position at the Chicago History Museum a couple of weeks ago now. I am a "History Fair Program Specialist," meaning I help run the Chicago Metro History Fair.

The Chicago Metro History Fair (CMHF) is an annual, regional competition where middle and high school students in and around Chicago research a historical topic of their choice and create projects (exhibit boards, websites, documentaries...) that show off their hard work. Volunteer judges from around the community help provide feedback on the students' work, and winning entries can advance to state and national level competitions (administered by Illinois History Day and National History Day, respectively).

So far, my work has primarily been in preparing for weekend "Palooza" events, where volunteer coaches (often history teachers, faculty, graduate students, etc) and librarians assist students with their History Fair projects. The regional competition will take place i…

Setting up an RStudio Server

I'm taking a break from React Native (our group decided not to use it for the Tic Tac Toe project) and wanted to put some thoughts in here about setting up my RStudio server for my SOTU-db project.

I won't get into the details of why I want the RStudio server here - that will be covered on the SOTU-db dev blog. Here, I just want to record some quick thoughts and problems that arose as I set up the server.  Gaining access to the server The server itself is a VM provided by Loyola University Chicago's Computer Science Department - thanks to George Thiruvathukal and Miao Ye for setting me up with this and providing support. 
I initially ran into issues because I couldn't figure out how to connect to the server. I knew I had been assigned a static IP and a DNS entry in Loyola's nameservers at sotu-db.cs.luc.edu, and assumed I would use SSH to connect to the server (which I further assumed was running Ubuntu in accordance with CS departmental policy and my previous expe…

Setting up a Tomcat server

This post covers the process of setting up Apache Tomcat 9 as a server for static .html pages.
Environment & Background I have access to a VM running Ubuntu 18.04 on which I've already set up an instance of RStudio server. I have SSH access but not a graphical interface, so it's been a good opportunity to work on my Linux skills. My goal here was just to serve static HTML pages to site visitors for now. It's really satisfying to have full control over the HTML and CSS, instead of being in an environment like Wordpress (or Blogger!) where it's never quite clear what markup it will accept and what it will totally ignore. I've been mocking up a frontend for SOTU-db using W3-CSS, which feels like kind of a cross between traditional HTML/CSS/JS and React Native. 
I had played around with Ubuntu servers before, so I was familiar with Nginx and Tomcat. As I've said many times, my favorite part about Ubuntu is the documentation that is completely incomprehensible, …