This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Table of Contents
Foundations of a Web Application
Introduction
Henrik Joreteg begins the Single Page Modern Web Applications course with a brief overview of what he’ll be covering. Henrik also walks through the Hubtags application that will be built throughout the course.
Project Setup
Henrik walks through the project files for the course. He begins by describing the NPM scripts included in the application. He also discusses why he will be using Webpack for packaging dependencies.
Creating a React Component
Using the ReactJS framework, Henrik creates a simple React component that will write some content to the page. React uses JSX to specify the HTML elements to be rendered.
React and the Virtual DOM
Henrik dives a little deeper into the way ReactJS renders HTML. React abstracts itself away from the DOM giving developers a simple programming model and better performance when rendering. Henrik will be using React to create UI elements in the Hubtags application.
Using ES6
Henrik converts the code he’s written so far from ES5 to ES6. He will be using ES6 throughout this course. Webpack was preconfigured to use Babel for compiling the ES6 code.
Creating Styles
Webpack looks at the extension of the style file to determine how to compile the styles. Henrik demonstrates this starting with a .css file and switching to a .styl file. Styles are included in the application using an import or require statement.
Handling Routes
A router handles different URLs within an application. Henrik defines a simple router and demonstrates how to create an instance of that router in the application.
Public & Repos Components
After answering a few audience questions, Henrik creates two UI components. The Public component will represent the home/login page and the Repos component will display a list of repositories. He also introduces Yeti.css.
Audience Questions
Henrik takes a break from coding to answer a few audience questions about client vs. server routing, Yeti.css, and the separation of concerns in views.
Creating a Layout Component
Many element will be shared across different pages. It would be inefficient to recreate something like a navigation menu in each component. Henrik demonstrates how to create a layout and use the children property to inject dynamic content. He then modifies the routes handler to load the correct layout.
Handling Local Links
At this point, clicking any link in the application triggers a undesired browser refresh. Henrik demonstrates how to handle local, in-app links without breaking external link functionality. He does this by using the local-links NPM module.
Creating a Local Links Component
Henrik challenges the audience to create a component who’s only responsibility is to add an onClick event and handle local links. This component will then be utilized throughout the application. He also answers a few audience questions and demonstrates how to use the React developer tools in Google Chrome.
Local Links Component - Solution
Henrik walks through how to implement the Local Links component. He creates a NavHelper component that wraps it’s content in a <div> tag and adds an onClick event handler.
Creating a Global App Object
Up until now, Henrik has been referencing an app property that was added directly to the window object. This convention can be a little messy and hard to read. Henrik demonstrates how to use the ampersand-app module to create a global app object which can be required more cleanly in other components.
GitHub Integration
OAuth Explained
OAuth is the process of an application gaining access to a user’s information in another account. For example, if you want to send a tweet through a third-party application, that application needs access to your Twitter account. Henrik spends a few minutes explaining the OAuth workflow.
Login Route
Henrik walks through adding a route to handle users logging in to the application with their GitHub account. He also opens the GitHub developer portal to show the OAuth documentation and demonstrates how to create a new GitHub application.
Auth-Callback Route
Now that GitHub has provided the application with an authorization code, Henrik creates a route to handle this callback. He then talks about how to use Gatekeeper to securely pass the application secret to the GitHub server.
Persisting the Login
Henrik creates a Model in the application for storing user data. One item needing to be stored is the authentication token. He will be using the LocalStorage api to persistent the data and create session-like functionality.
Logging Out
Since logins are manage by GitHub, this application can’t directly log out the user. It can, however, clear the LocalStorage data and refresh the browser so there isn’t any persistent data. Henrik adds the logout functionality and explains his reasoning behind using window.location for the browser refresh.
Fetching User Data
Using the GitHub API, Henrik fetches the data for the current logged in user. Only properties defined in the model will be stored in the application. He also updates the model to fetch new data anytime the token is changed and when the application initially loads.
Binding to a Model
Henrik adds a mixin that will watch for changes on any “props” passed to a component. If a change is detected, the render method of that component will be called and the screen will be redrawn. Henrik also goes into more detail about React’s lifecycle methods. -
Collections and Mixins
Henrik introduces the Ampersand Collection module. A collection is an observable array. He creates a collection to store a list of repos for the current user. After that, Henrik demonstrates how to create a mixin that will make it easier to access the auth token.
Fetching User Repos
To populate the collection of repos from the GitHub api, Henrik calls the fetch() method. Similar to the the Model code, the Collection will make an XHR request to the server specified in the url property. After verifying the request is working, Henrik spends a few minutes answering questions from the audience.
Rendering Repos
Henrik modifies the Repos page to loop through the list of repos and populate an unordered list. He also utilizes the ampersand-react-mixin to monitor the collection for changes. Once the page is populated, Henrik demonstrates a few alternative ways to write the code with features of ES6.
Keys
Henrik spends a few minutes talking about how to make the re-rendering of DOM elements more performant. Adding a “key” attribute and assigning it a primary key from the data will help React determine if that element needs to be updated or mutated.
Adding Icons
Henrik introduces the GitHub Octicons NPM module which contains all the iconography from the GitHub website. He imports the module into the application and demonstrates how to style elements with these icons.
Derived Properties
Derived properties are depending on other properties within a model. If any of its dependent properties are updated, the derived property will trigger a change event. Henrik creates an appUrl derived property and applies that property to each repo link.
Repo Detail Page
Henrik creates another component to represent the repo detail page. Once the UI is created for this page, he adds a route to dynamically pass the data of the repo to be displayed. Henrik also adds a convenience method to the collection to find the appropriate repo.
Optimizing the Details Page
Henrik wraps up the Labelr application by adding code to handle if a user enters the application directly through the details page. In this case, the Model will determine if it needs to fetch new data from the server. Henrik then talks a little about API security and answers a few audience questions.
Frameworks
Why Frameworks?
Henrik talks about why frameworks can be useful to developers. Frameworks help organize code and use proven techniques. They provide solutions to problems and often allow for easier collaboration.
Framework Rundown
All frameworks have pros and cons. Henrik runs through a few of the most popular JavaScript frameworks including Angular, Backbone, Ember, React and Ampersand. With each framework, he shares his thoughts as well as the advantages and disadvantages.
Framework Q&A
Henrik spends a few minutes answering audience questions about the different frameworks he discussed earlier. He also shares his opinion on scaffolding tools like Yeoman and framework recommendations for agencies.
Repo Labels
Exercise: Storing Labels
Henrik introduces the first exercise. In this exercise, you will create a label model and a collection to store the labels for each repo. Henrik also provides a few hints to the solution along the way.
Storing Labels Solution
Henrik walks through the solution to Exercise 1.
Using the extend() Method
Henrik spends a few minutes explaining the extend method he’s using in each module. This method takes an Object as a parameter and appends the properties of this object to the object in which it is called. Henrik also answers a few questions about the behavior of collections and how changes are triggered.
Rendering Labels
Building off the first exercise, Henrik quickly demonstrates how to render all the labels on the repos page. This involves passing the labels collection as a prop so it will be monitored for changes.
Exercise: Creating a Label Item Component
In this exercise, you will refactor the rendering of a label item. You will move the list item mark-up into a component and render this new component on the repo details page. After giving the audience a few minutes to work on this, Henrik provides the solution.
Forms
Adding an Editing State
Eventually, the labels and colors will be editable. Henrik adds conditional logic to the render method inside the label item component to determine which DOM elements to return. If the item is in editing mode, a form will be returned instead of the basic mark-up.
Label Colors
Henrik uses the color property returned for each label item to dynamically style the background color of a <span> element with the label’s color. He also explains why the double-bracket syntax is required when using object-notation in JSX.
Exercise: Changing Label State
In this exercise, you will add a click event to the edit button. When the edit button is clicked, the label should display the edit form. After providing a few hints, Henrik walks through the solution.
Canceling the Edit State
Henrik walks through how to add another click event. This time he adds the event to the cancel button which will return the label back to its original state. After that, Henrik answers a few audience questions and shares a few more debugging tips.
Exercise: Deleting a Label
In this exercise, you will implement the delete functionality for a label. Henrik begins by walking through the GitHub API as well as how React handles the removing of items through a RESTful service. He then gives the group a few minutes to implement this.
Deleting a Label: Solution
Henrik walks through the solution for deleting a label. Remember that this is a live API and your GitHub repositories will reflect any changes.
Editing Labels
Henrik demonstrates how to make labels editable. While doing this, he explains the unique behavior of forms in React. Since the form is re-rendered continuously in the application, Henrik relies on the state property to help set form input values.
Editing Label Colors
The next form field needing implementation is the color field. Henrik adds the code for editing the color and also shows the audience how to revert the values back when the cancel button is pressed.
XHR Requests
Sending Updates to Github, part 1
With the form fully implemented to edit labels and colors, Henrik adds an extra XHR request to the model to send the updated data to Github. If there’s an error when sending the request, Henrik makes sure to manually set the current state to the new values.
Sending Updates to Github, part 2
Henrik continues his work on sending the updated data to Github with a little debugging. For example, how the application handles a drop in network connectivity. Henrik also fields a few audience questions.
Creating New Labels
Henrik adds a button for creating new labels. When a new label is created, it will need to know whether or not to make an API call for a PATCH (update) or a POST (add).
Canceling New Labels
If the user chooses to cancel the creation of a new label, the model object in memory will need to be destroyed. Henrik adds a conditional statement to the onCancelClick method to determine if the label is saved or if it should be destroyed.
Security
Exercise: Securing Routes
In this exercise, you will create a requiresAuth function that will help secure routes that require authentication. This function will return a function that validates the current user is logged in. Henrik sets up the exercise and provides a couple hints to get everyone started.
Securing Routes: Solution
Henrik walks through the solution to the Securing Routes exercise.
Handling 404 Errors
Since the Labelr application is handling all the routes on the client, an invalid route will not trigger a traditional 404 error. Henrik demonstrates how to handle wild-card routes and creates a MessagePage component that can be reused in different situations.
Deployment
Using a Config File
Henrik demonstrates one technique for handling development and production configuration. He creates a config.js file to store the authentication URLs and Github application keys.
Deploying with Surge
Surge is a front-end development tool for deploying static content. It will take content built in the public directory of the application and publish it to a subdomain on surge.sh. Henrik demonstrates this process and answers a few additional questions about deployment.
Pre-rendering Content
Currently the application home page does not contain any markup because React generates everything once the application is loaded in the browser. Henrik walks through how to configure the application in a way that Node will be able to generate markup through the build process.
Generating Layout Markup
Henrik applies the same pre-rendering concept from the home page to the layout page. This way the user will see some of the layout even if the rest of the application and data is not loaded. Once the data is loaded, React will re-render the page.
Final Thoughts
Henrik begins wrapping up the course with a few final thoughts about his experience as a developer. He talks about the benefits of using code linters, code-style enforcement, contributing to open source projects and other ways to stay in touch.
Q & A
Henrik answers a few final audience questions about NPM Link, CSS frameworks, and Ampersand.