A collection of my overviews on various topics relevant to CS 394.
Team Tools
Most of the links on this page about about software development, but the primary focus of the course is team development. So the first link is about some simple tools for detecting possible team development issues. We use these to start discussion in coaching.
Software Overviews
- Git and github
- Agile Tools (and do tools matter?)
JavaScript
A prerequisite to good React coding is a solid understanding of modern functionally-oriented JavaScript programming.
- Hello, JavaScript -- my mini-tutorial on modern JavaScript programming
- Modern JavaScript -- a good tutorial and reference
- MDN JavaScript -- more detailed reference
- my notes on how to write modern JavaScript
- Kent Dodd's JavaScript to know for React
React
React is one of the baseline technologies for this course. It is very popular, very helpful for quickly building robust interactive single-page apps, and good to have on your resume.
When looking for help with React, be wary of any site that is more than a year old, and avoid any site from before 2019, when React 16.8 was released.
I have created two React tutorials for my courses.
- Quick, React! -- This is a follow-along tutorial, introducing the most critical tools you'll need, including connecting to a cloud database.
- Learn React -- This is a sequence of tasks that requires you to apply the tools in Quick, React! to build a moderately complicated shopping application.
Here are some useful React resources:
- Short notes on key React concepts
- Older versus current React coding techniques
- Write clean(er) Components & JSX -- good advice on how to write more readable React
- JIRA clone -- example modern React code with functional components and Cypress tests
Expo and React Native
React Native uses React programming concepts for building native mobile apps. You still write in JavaScript and JSX, but in the JSX you render mobile UI elements such as View and Text, rather than div and p. The code is translated into native code for iOS and Android. Some platform-specific code is often needed.
Expo is a suite of tools and cloud services that make prototyping and deploying React Native apps simpler. It even supports deploying an app as a web page, if that makes sense.
While Expo is really good for prototyping, it does not support all features of React Native. Therefore, when looking for help when building your app, be sure to include "Expo" in your search terms.
I have created one tutorial for Expo and React Native. It is based on the Quick, React! tutorial, but much more extensive.
Here are some useful resources on Expo and React Native:
- Expo documentation -- search here first when looking for documentation on components, to see additional Expo-only features, and avoid using React Native-only ones.
- Getting Started -- the official React Native tutorial
- Styling:
- React Native Styling Cheatsheet -- a list of all the CSS-like styling options in React Native.
- A year of React Native styling
- Design System for Dummies: Create your own flavor of React Native app in 3 Easy Steps
- The Iceberg of React Hooks -- an nice dive into the power and pitfalls of Hooks
Firebase
Quite often, apps will need a central place to keep data. While you can create your own server to do this, that means you have to maintain a stable host that's easily deployed to. A regular web server, e.g., PHP, is not really appropriate since you don't want HTML pages, you want data.
The current best free option is Firebase. It's easy to get started, but it has its quirks.
Continuous Integration
There are many tools to support setting up a continuous integration server to automatically build and test your application code when the main branch is updated. In this class, I recommend using Github Actions, because it's free, and already integrated with Github.
- Setting up CI with Github Actions -- my guide, customized for React and Expo / React Native
Debugging React Apps
- Chrome’s DevTools -- breakpoints, DOM inspectors, etc. You'll also find similar tools in Firefox, Safari, and Edge.
- Debug Like a Lion With Chrome’s DevTools -- some really really handy tips for the Chrome console. Did you know you can trace functions in Chrome? Check out monitor. Note: doesn't work with arrow functions.
- React Developer Tools -- because your React source code has been transpiled into efficient but pretty unreadable JavaScript, you need to install this plugin to help Chrome DevTools work with React apps
- Reactime -- an optional but impressive time-traveling debugger for React; it requires a small change to your app and a Chrome plugin
- How to Stop Using Browser Dev Tools and Start Using Your Editor’s Debugger -- there are many obvious advantages to using your editor to set breakpoints and debug. This page is for VS Code. Similar pages can be found for other sophisticated programming editors.