DOM Debug

Getting Started clone the repository: git clone https://github.com/VSchool/dom-debug Remove the hidden .git folder. cd dom-debug # Copy/paste this command. You don't want to enter it incorrectly. rm -rf .git Open index.html in the browser. We'll be using the Chrome developer tools (Firefox and Opera should

React

Rolling Dice with React State

Using what you have just learned about state in React, you are going to create a component that renders 5 dice numbers for the user to view. You Must 1. Create a class component called 2. Write a method in that class that produces 5 random numbers between

Student Life

Transportation 2 V School + Downtown Parking

UTA Public Transit Pass: V School has a student discount with UTA for public transit passes. These passes allow students to ride the Bus, Trax, and Frontrunner while you're a student of V School. Cost of the pass is a $150.00 rental fee for the 12 weeks. This is

Jest : Your First Test

Jest is an awesome testing library maintained by employees at facebook and open source contributions. Jest is used for running tests on your code. It both runs your tests and provides the methods needed to write the tests. Jest Documentation Installation To install jest, create a package.json file in

Error-Handling

Error Bound( ries )

Before doing this assignment, make sure you have read our write up on ErrorBoundary components. That article can be found here. CD into your assignement folder and run the following command to clone, remove the .git, install dependencies, and open the assignment in VS Code. git clone git@github.com:

React

React Error Boundaries

Error Boundaries in React help us face a few error handling issues head on. The first issue it helps us with is thrown errors. If an error is thrown inside of a React app, it is likely that part or all of the App will crash leaving you with nothing

Submitting Assignments via Slack

1. Make sure your exercise/project has a package.json file. The easiest way to create one is to run npm init -y from the exercise/project root folder. 2. Push your code to GitHub. (Likely will require a git add -A, git commit -m "message describing your changes", and

Mongoose

Mongo Shell Practice

Using the `mongo` shell, you will perform all possible CRUD operations on a database collection of candies.

React

Render Probs...

Before taking on this debugging challenge, make sure to read our article on render props or this is likely to not make much sense! - Render Props You have been given a small application from a co-worker who is trying to learn how to use render props. They tell you

DOM Manipulation Olympics!

The Qualifier and Bronze Medal are required, the rest is an optional challenge DOM manipulation is it's own beast. Fairly soon, you'll be doing a lot of it along side of other things that are conceptually difficult if you're not yet familiar with DOM manipulation. This exercise is designed to

Exercise

Changing Themes using Context

Using what you have just learned about React Context, you are tasked with making a ThemeProvider context for a new application. Your goal is build a home page that offers a dark and a light theme. This theme can be toggled by the user. This will be excellent practice in

Transitions with react-transition-group

This article is intended to help you build meaningful transitions into your applications. While it is extremely easy to overdo it with animations and transitions, they can also add a professional feel when done correctly. This article will use the react-transition-group module. Note: Each of the components provided by this

Don't bug me I'm on vacation

Your goal for this exercise is to use the debugging techniques we have taught you to fix this project. Copy the following code into your terminal # First `cd` into your assignments folder and then into your exercises folder git clone https://github.com/VSchool/vacation-bug.git cd vacation-bug # Copy/paste

Debugging Part 2

One of the most important and useful tools for debugging are the Chrome Dev Tools(or the equivolent on other browsers). The tabs we will use most frequently for debugging are: * Console * to see our console logs * to see any errors that may show up * Sources * to check our file

Debugging Part 1

One of the first and most natural types of debugging is just looking through our code for typos, misused variables, or errors given to us by our text editor. In the screenshot below we will see some examples of errors given by our text editor. Take a minute to look

Deployment

Deploying your MERN project with Heroku (using your Master Git Branch)

Heroku is an excellent service that specializes in making deployment of your web application quick and painless. Fortunately for us, it also has a free tier that will be perfect for our needs. There will only be a little bit of setup needed to get your web app up and

React Developer Tools

React Developer Tools Developing React apps becomes a lot more pleasant when you utilize the React Devtools. In many ways, it looks like your DOM tree does in the elements tab, and you will explore it in the same way. Installation Go to https://chrome.google.com/webstore/detail/react-developer-tools/

React

React Context

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application.

React

Render Props

Render-props is a composition pattern that makes reusing React components many times easier. They are very similar to Higher Order Components with some notable differences; one being that they are quite a bit more configurable.

React

Higher Order Components

Higher order components, or HOC's, are simply functions that take React Components as arguments, or return them as values, or both.

Token Auth with JWTs Part 3 - Security and UX - React + Context

This is part 3 in a series of tutorials about authentication. If you haven't already, get some additional context by going through the other parts: 1. Authentication Basics 2. Token Auth with JWTs Part 1 - Server Setup 3. Token Auth with JWTs Part 2 - React + Context Set up

Token Auth with JWTs Part 2 - React + Context

This is part 2 of a multi-part series on setting up user authentication in a MERN-stack application using JSON Web Tokens. If you haven't been following along, please visit the other posts for a full understanding of the current project: 1. Authentication Basics 2. Token Auth with JWTs Part 1

Web Applications

Token Auth with JWTs Part 1 - Server Setup

Note: If you haven't yet read through the Authentication Basics post, you should go read through it now before moving on. Intro What we'll be working with is a simple todo list organizer and adding user authentication on it so that a user will only see his/her todo items

Error handling in Express

Introduction Express is a very lightweight framework that allows you to do things however you want. This makes it very flexible, but also means you could write a less-than-optimal server without knowing it. Error handling is an important task for your server to accomplish. If you don't gracefully handle errors,

Synchronous JS Todo App

* Tools: HTML5, CSS, Javascript Goal You will be creating a CRUD app that tracks a user's todo list. Users should be able to add todo items, view them in a list or grid, mark each as completed, and delete them from the list. Constraints This todo app only needs to