ihollander

React Redux Basic Setup

Working example of the code below

Install dependencies:

npm install @reduxjs/toolkit react-redux

ihollander

Rails API Setup

Environment Setup

Make sure you are running a Ruby version supported by Heroku to make your app easier to deploy later. At the time of writing, that is:

• 2.6.7
• 2.7.3
• 3.0.1

ihollander

Building React features

1. Decide if you need state. Do we need state for this feature? If so, what components need access to that state? Initialize state in the closest common parent component to all the componenets that need access to it.
2. Set up the initial state. What's a good initial value? What will we see on the page first? How will it change?
3. Set up component to render something based on state. Do we need conditional rendering?
4. Find a way to update state dynamically (based on user interaction). Add an

ihollander

Problem Statement

Live Server is a great tool for working with Javscript. It automatically reloads our code any time changes are made to files in the folder where Live Server is running. This becomes an issue when using a tool like json-server with a .json file in the same directory - since changes you make using POST/PATCH/DELETE requests will update the .json file, these changes will also cause your app to reload.

Solution

You can solve this by telling Live Server to ignore changes to certain files. Open your VSCode preferences by pressing command + shift + p in VSCode and searching for "Preferences: Open Settings (JSON)". Then, add the following lines to the settings.json file:

"liveServer.settings.ignoreFiles": [

ihollander

<p> tag challenge

Write code that handles the following action:

• When a user clicks on any <p> tag on a webpage, change the font of the <p> tag that was clicked to comic sans.

You should be able to test your code by opening up a console on any webpage that has <p> tags (so, pretty much any webpage... NY Times, Wikipedia, and Medium are fun) and pasting in your solution.

If you want some hints, expand the sections below.

ihollander

# How to play audio from the command line using afplay. Mac only!

# good reading on working with processes/forks: https://saveriomiroddi.github.io/Executing-and-killing-ruby-parallel-background-jobs/
# afplay: https://ss64.com/osx/afplay.html
# POSIX signals: https://man7.org/linux/man-pages/man7/signal.7.html

# Here's a simple example:
# play a song
process_id = spawn "afplay test.mp3"
# stop playing (make sure to use the same process_id returned by spawn)

ihollander

Active Record Pairing Assignment

Today, you'll be working on building out a many-to-many domain using Active Record to practice creating associations between classes, AR-style.

Your mission: take one existing OO Ruby Practice lab, and refactor the code to use Active Record.

You're welcome to work on any old lab you like (so long as it has a many-to-many relationship). Here are some good labs to try:

• Dog Walker: https://github.com/ihollander/mod-1-practice-challenge-dog-walker
• Blood Oaths

ihollander

How to Pair

Setup

1. Set up a video call with your partner - Slack is probably easiest, but you can also use Zoom or Google Meet if you and your partner prefer.
2. Make a copy of the Pair Programming Contract and fill it out with your partner (click File > Make a Copy).
3. When you're ready to start on the lab, one person should fork the lab. Remember: only one person should fork the lab.
4. That person should then add their partner as a collaborator to the repo.
5. Both partners should clone down the repo by running git clone.

ihollander

JS Mini Challenge Instructions

Setup

• Open the Github link from the Assignments page on Learn
• Don't fork!
  • Click the green 'Clone or download' button and copy the link to clone the repository
  • Then in your terminal: git clone the link, and cd into the assignment directory
• Create your own branch off master: git checkout -b your-name

Submitting

ihollander

Mod 3 Schedule

Weekend HW:

• Immersive Module 3 (version 2.0) Javascript Foundations
  • Basics (all except DO NOT DEPLOY labs)
  • Principles (all except DO NOT DEPLOY labs)
  • Data Structures
  • Looping and Iteration