Pre-bootcamp Workshop 3 for TechLadies Bootcamp 4: React, Express and MongoDB
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
public
src
.gitignore
README.md
package-lock.json
package.json

README.md

TechLadies Bootcamp 4 Pre-bootcamp Workshop #3: React, Express and MongoDB basics

Homework

For those on Macs who came to workshop 2 and ended up installing NodeJS through Homebrew instead of asdf as documented in the setup guide, you can take the time to install NodeJS properly!

First you have to uninstall the node you installed through Homebrew by running the following commands in your terminal:

brew uninstall node;
brew prune;
rm -f /usr/local/bin/npm /usr/local/lib/dtrace/node.d;
rm -rf ~/.npm;

Now you can follow the setup guide instructions to install NodeJS with asdf!

Pre-requisites

You should have come for workshop 2 and built a simple Todo app following the code here. We will be extending whatever you built in workshop 2.

Slides

Slides for this workshop can be viewed here https://docs.google.com/presentation/d/1Hr_-35dB0t9-EOS8p5Rto1KlVsBAbFmp8mCD5yzuQg4/edit?usp=sharing

What we will cover during this workshop

Here's a breakdown of the workshop contents along with links to relevant reading material for those who have time to dig deeper!

Refresher (~30min)

Concepts:

  1. Revisiting what you've learnt about React so far.

Hands-on:

  1. Extending the todo app to add new todos

More React (~2hrs)

Concepts:

  1. Understanding the DOM (Document Object Model)
  2. React and the Virtual DOM
  3. State and Props of a React Component

Hands-on:

  1. Breaking out our Todo app into multiple components
    • Adding a Header component
    • Adding an About component
    • Passing a title prop to our Todo component

Concepts:

  1. When does a React component re-render
  2. React Component lifecycle

Hands-on:

  1. Making an API call on componentDidMount to show a random cat image

Concepts:

  1. Client-side routing

Hands-on:

  1. Implementing client-side routing with React Router

NodeJS, Express and MongoDB (~2hrs)

Setup:

  • Install express generator: npm i -g express-generator
  • Install mongodb: brew install mongodb or choco install mongodb

Concepts:

  1. Front-end, Back-end, Full-stack
  2. API calls and HTTP methods

Hands-on:

  1. Creating a simple express application which returns a list of todos
  2. Fetching todos from the server

Concepts:

  1. Routing
  2. Middleware:
  3. RESTful routes - Reading: Restful Routing

Hands-on:

  1. Nesting routers
  2. Add create endpoint for todo
  3. Saving new todo to the server

Concepts:

  1. Persistence layer
  2. Databases and MongoDB

Hands-on:

  1. Sign-up for an mLab account
  2. Exploring the mongo console and CRUD operations

Concepts:

  1. ORM (Object Relational Mapping) and ODM (Object Document Mapping)

Hands-on:

  1. Connecting our Express app to MongoDB with Mongoose
  2. Defining a Todo schema in Mongoose
  3. Saving Todos to the database

Extras

Topics to touch on if time permits:

  1. Explaning ES5, ES6, ES7, JS versioning, and Babel
  2. Explaining the spread operator
  3. Explaning asynchronous JS and async/await
  4. Error handling in Express
  5. Implementing other CRUD endpoints