React w Node & Express Server

Turbo 360

The MERN (Mongo, Express, React, Node) stack is taking over the software industry but too often, programming tutorials only focus on just the "R" or one of the other letters. To be a true full-stack developer, understanding how all the parts work together is crucial for success. In this tutorial, we combine Node, Express and React to create a full stack blog website. Our React app will consume a REST API from our Node/Express server which will store the data entirely within the context of the project - no 3rd party server, "dummy" data or fake APIs for the sake of beginner tutorials. This tutorial covers 100% of the stack. Along the way, you will: - Write custom components - Use ES6 syntax - Deploy to a live staging environment - Configure Webpack This tutorial is suitable for beginners to React but not to programming entirely. If you have a basic understanding of JavaScript and rudimentary programming concepts (variables, loops, arrays, etc) you should be fine.


Setting Up

To begin, we discuss what we will build throughout this tutorial and the concepts you should know going into it. We then configure our environment by installing Node JS as well as a couple other packages such as Webpack and the Turbo CLI. Finally, we clone a project on the Vertex platform which will serve as our Node/Express foundation and pull down the source code to get started.

Node & Express Project

In this unit, we configure the Node/Express project by installing the dependencies and connecting the environment variables. We then run the code locally to make sure everything works. Then we briefly explore the basic structure of a simple Node app - templates, routes, the package JSON file and node_modules folder. Finally, we create a new template page for our project which will render our React code which we set up in the next video.

React Setup

We set up the basic React code in this video creating creating a simple "App" component. We then connect it to the home template from video 2 by transpiring the code through Webpack. For a little extra Webpack orientation, we change the build configuration in order to see how it affects the output files in a typical React project.

Posts Component

In this video, we create a "Posts" components whose purpose is to render the most recent blog posts of the site. We add state to this component and render the list of blog posts from the state using the ES6 JavaScript 'map' iterator. Finally, we handle the unique keys for each element of an iteration by assigning an ID attribute to each post.

Fetching Posts

It's time to fetch posts from the server! In this video, we first create two sample blog posts on the Node/Express project by taking advantage of the built-in content management system that comes equipped with all Vertex projects. Then, after briefly showing how API queries are executed, we add an API call the Posts component right after it renders. When data is returned from the API, we render it in the component by resetting the state and doing away with the static data from the previous video.

Styling and Images

In this video, we add some basic styling to the posts page so that it shows more than just plain text. We add image thumbnails by taking advantage of the scaling/cropping features of the Vertex 360 image hosting service and we also show the post date and preview text.

Post Component

What good is a blog website if you can't read blog posts? In this video, we create a dedicated component for individual blog posts. We then connect it to another template with corresponding route in order to render the post on a separate page. In particular, we pass data from the server side directly to the React component without making a followup API call which is another way of facilitating communication between the two areas of the codebase.

Post Detail Page

Now that we have a dedicated route for showing individual posts as well as a corresponding post component, we pass the full post data to the React code. The post component then renders the full data - title, image, date and full text. We use "props" for this rather than state as another way of passing data through a React component tree.

Deployment

We cap off the tutorial series by deploying our project to the staging server on Vertex 360 and making sure it works the same there as it does on local.

Membership Options