Building a Full-Stack App with React and Express

Build an isomorphic web application that implements React, Express, Mongoose, and much more.
Course info
Rating
(335)
Level
Advanced
Updated
Aug 17, 2015
Duration
3h 24m
Table of contents
Introduction
Scaffolding the App
Creating a React Front-End
Completing the Front End
Implementing an Express Back End
Adding MongoDB
Making the App Isomorphic
Description
Course info
Rating
(335)
Level
Advanced
Updated
Aug 17, 2015
Duration
3h 24m
Description

In this course, we'll build a full-featured web application which emphasizes lighting-fast load times and live updates. We'll learn how to use React.js to build a front-end web application, and use Browserify and Gulp to load the app isomorphically in Node.js. We'll also learn how to implement Express for handling HTTP requests, and how to integrate Mongoose with Express for fast and expressive long-term data storage.

About the author
About the author

Daniel Stern is a freelance web developer from Toronto, Ontario who specializes in Angular, ES6, TypeScript and React. His work has been featured in CSS Weekly, JavaScript Weekly and at Full Stack Conf in England.

More from the author
Vue.js: Big Picture
Beginner
1h 6m
31 Aug 2018
Testing React Applications with Jest
Intermediate
3h 36m
11 May 2018
Isomorphic React
Intermediate
2h 44m
11 Jan 2018
More courses by Daniel Stern
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Welcome ladies and gentleman to this exciting tutorial series. I'm Daniel Stern, code whisperer, and in this series of tutorials we're going to learn all about building a full stack application with React and Express. First a little bit about me. I've been working in the tech field for about five years, I've worked for big companies, small companies, and used NodeJs and Express in production. I like to make frontend libraries using JavaScript and I hope you'll join me for this exciting series. In this first module where we're going to sort of introduce what we're going to discuss.

Making the App Isomorphic
Over the course of the preceding modules, we've built a fully functional grocery list app. However, when the app loads, there is a brief flash of unstyled content while the app uses AJAX to collect the data. In this module we'll be setting the app up so that there is no unstyled flash and the content in the app appears instantly. So here I am inside index. ejs. You'll recall we made our main file an EJS file and not an HTML file. The reason for this is that we can now use a certain kind of templating used in EJS files. It looks like this. So inside the tag with the ID app, I'm going to put diamond brackets with division signs inside. And after the first one, I'll put a dash. Now inside this tag I can define the name of a variable, and we'll set that variable up momentarily in JavaScript. So I'll just call this variable react output. Alright, our index. ejs now has a react output tag. In the next video we'll be updating Express so that this tag is filled with pre-rendered React data.