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

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…

More tic tac node

Well I am feeling pretty good about my progress with React Native, but haven't done any more coding in the last couple of days. I just re-opened the project again today and thought I'd blog about some of my as-yet unsolved challenges!

I like loops Things with declaring and initializing variables are really different than what I'm used to. In Processing and Python, global variables can be declared and re-declared wherever, and the draw loop will "pick up" those changes and return the desired results. For example, in Processing, I could initialize the integer "y" to 5 with int y = 5; then inside the draw loop, call println(y); to repeatedly print "5" to the console. If I then call a function that just does y=7; the console will start printing "7" repeatedly, since it recognizes the new value of y.

I used this a lot to build setter functions, for example initializing all the entries in the squareStates array in Tic-Tac-Tohmygod (my Proc…

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…