Building a Full-Stack App with React and Express
Daniel Stern
ByCourse info
Course info
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.
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.