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:
- Revisiting what you've learnt about React so far.
Hands-on:
- Extending the todo app to add new todos
More React (~2hrs)
Concepts:
- Understanding the DOM (Document Object Model)
- Reading: What is the DOM?
- React and the Virtual DOM
- Reading: React: The Virtual DOM
- State and Props of a React Component
Hands-on:
- 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:
- When does a React component re-render
- React Component lifecycle
- React docs: The Component Lifecycle
Hands-on:
- Making an API call on
componentDidMount
to show a random cat image- Reading: The Fetch API
Concepts:
- Client-side routing
- Reading: Server-side vs Client-side routing
Hands-on:
- 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
orchoco install mongodb
Concepts:
- Front-end, Back-end, Full-stack
- API calls and HTTP methods
- Reading: What is an API? In English, please
- Reading: Hyper Text Protocol Explained
- Reading: 7 HTTP methods every web developer should know
Hands-on:
- Creating a simple express application which returns a list of todos
- Fetching todos from the server
Concepts:
- Routing
- Reading: Basic routing in Express
- Reading: Express Routing guide
- Middleware:
- Reading: Writing middleware in Express
- Reading: Using middleware in Express
- RESTful routes - Reading: Restful Routing
Hands-on:
- Nesting routers
- Add create endpoint for todo
- Saving new todo to the server
Concepts:
- Persistence layer
- Databases and MongoDB
- Reading: Introduction to Databases
- Reading: The Definitive Guide to NoSQL databases
- Reading: Introduction to MongoDB
Hands-on:
- Sign-up for an mLab account
- Exploring the mongo console and CRUD operations
- Reading: MongoDB CRUD operations
Concepts:
- ORM (Object Relational Mapping) and ODM (Object Document Mapping)
- Reading: What is an ORM?
- Reading: Mongoose Quick start
Hands-on:
- Connecting our Express app to MongoDB with Mongoose
- Defining a Todo schema in Mongoose
- Saving Todos to the database
Extras
Topics to touch on if time permits:
- Explaning ES5, ES6, ES7, JS versioning, and Babel
- Explaining the spread operator
- Explaning asynchronous JS and async/await
- Error handling in Express
- Implementing other CRUD endpoints