JavaScript and Ruby on Rails with React, Angular, and Vue

A preview of what we will cover in the Introduction to JavaScript section.

We go over what JavaScript is, and why it's such a compelling language to learn.

An overview of the Repl.it development environment that we will be using in this section.

We look at how variables work in JavaScript and take our first look at scope hoisting.

We take a look at two other keywords for declaring variables in JavaScript, and what they mean.

We look at some string manipulation techniques in JavaScript.

We go over for loops and basic Math functions

We learn how to add dynamic values to our messages with string concatenation and interpolation.

Note: The character is ` and not '

So the code is

`The message is the ${message}`

We discover what equality and sameness look like in JavaScript and why they are different.

We get into functions and the various syntaxes we can use to declare and call them.

We learn about returning values from functions

We look at the use of Objects in JavaScript and the different ways we can declare them and inherit from them.

We look at another way for a JavaScript class to inherit from a parent class.

We discuss the mysterious `this` property

We take a look at how to use code that is declared in other files, and organize code and data into modules.

This is an introduction to a new syntax for exporting and importing code from modules.

We can't use this in https://repl.it because it does not support this syntax yet, but we can use it in React here

https://codesandbox.io/s/new

We start using the HTML/CSS/JS REPL and try out using JavaScript to interact with the Document Object Model.

In this lecture, we learn about a special type of JavaScript function - event handlers.

These are the functions that are at the foundation of dynamic web content.

We start working on the password strength checker web application.

We start to add more dynamic interaction to the strength checker.

We update the logic and rules for strength checking.

We finish up the password strength checker and make sure it looks good.

Introduction to this section covering Ruby on Rails

Preview of the completed project for the section and features built along the way

Local installation of Rails walk-through on Mac OS

Walk-through of how to install Ruby on Rails on a windows machine

Installation extras

Start a new rails application, both local and cloud-based IDE examples given

Explore the structure of a Rails app, learn about MVC and also learn how to set up the root route for the application

Recap of naming conventions used in the last video along with some new ones

Summary text lecture shows how to create new rails application, run server, local and cloud-based development and general overview of a rails app structure

Learn how to add routes

Learn about application.html.erb and embedded Ruby

Explore structure of the index page and explore styling options

Add materialize to the application and a navbar

Learn how to make a footer stick to the bottom of the page at all times

Add some javascript functionality, learn how to work with jquery and Rails

Add styling to content layout, learn how to incorporate features from material design

Learn how to work with the db and perform CRUD operations from the back-end using models

Work on validations and displaying items in the browser

Learn how to use partials effectively

Create the students resource for the app

Add a students listing index

Learn how to add forms to the app

Create student records from the web and deal with errors

Display flash messages and errors

Learn how to build the student's profile page

Add the ability to edit student profiles from the browser

Learn how to use partials and methods provided by Rails to eliminate redundancies

Use has_secure_password and bcrypt to add secure passwords for students

Update form partial along with modifying existing styling for buttons

Learn how login/logout functionality works and build a login form

Create sessions for users once logged in, end sessions upon logout and more

Add restrictions based on logged in/out state from views and controllers along with cleaning up the layout

Learn about associations in Rails

Add the many-to-many association from the back-end

Tailor the front-end to handle enrollments

We deploy our integrated app to Heroku.

Very soon, we will be bringing you a new section that continues building the app that we have deployed here.

We will show you how to build a modern authentication system for the Todo React web app and the Node.js REST API using the massively popular Passport.js library (http://passportjs.org) and how to deploy this to Heroku, with integration into the MongoDb datastore.

We begin the React on Rails section of the course.

Getting Started with Alpha Blog

We will be cloning the Alpha Blog application from GitHub and installing the intial dependencies. We will then take a look at the app in the browser.

Alpha Blog GitHub repo - https://github.com/railsjavascriptcourse/alpha-blog

Installing Webpacker and React

We will go over the new tools and frameworks that we will be adding to our and then go through the steps of installing them and setting them up.

React-Rails and Pushing to GitHub

We install the react-rails gem and then create a GitHub repository and back up our work so far to our own repo. We also use our first React component.

Webpacker, React, and Yarn - Layout and Configuration

We review what we have added to the project so far and take a look at the key code and configuration files that are used by these tools and frameworks.

React - How It Works

How does React work? 

How is it different from other JavaScript libraries?

What does it do and what will it not do for us?

We explore these topics in this video.

Starting the Article Component

In this lecture, we start the process of rebuilding the article Rails view component as a React component.

Article Component continued

We continue developing our Article React component by adding more of the properties from our Rails view.

Finishing Article Component

We finish the conversion of the Article component from a Rails view template to a React component created via the react_component helper.

Adding a Timestamp Component

We take a look at how to add an open source Timestamp component to our project.

Timestamp Component continued

We integrate the Timestamp component into our Article component creating a nested component.

React Component LifeCycle - ComponentDidMount

We take a look at a stage of the React Component LifeCycle that we haven't seen before and see how we can use it to add more dynamic functionality to our front end application.

React Component LifeCycle - ComponentWillUnmount

We take a look at another part of the React Component LifeCycle and the important part that it plays in building maintainable front end applications.

Colorpicker Component Introduction

We start with building a new component which will help to increase the customizability of our blog application.

Creating the Colorpicker

We go through the process of creating the new component from scratch.

Adding Color to Users

We explore how we can add theming capability to our blog through the use of forms and ActiveRecord models and migrations.

Adding Colorpicker to the Form

We begin to integrate our new custom component with our existing view code.

Creating the Colorpicker Constructor

We explore yet another aspect of a React Component class and prepare to add more dynamic functionality.

The handleChange Function

We start to see the true power of React as we are able to add custom code that reacts to changes sent by the user via the SketchPicker component that we have nested in our Colorpicker component.

Improving the handleChange Function

We continue to build out our React code so that we can integrate the frontend user interactions with changes to our ActiveRecord model.

Wiring the Component to the Form Field

We complete the integration of user input via React to peristence via ActiveRecord and have all our components working together to save the user's background color choices.

Updating the App to Use Preferred Color

We update the application layout and add a new view helper in order to display the user's preferred color to them, and handle the non-logged in user use case.

Cleaning Up and Nice to Haves

We explore what would make the code more clean and the functionality more interesting in the future.

Introduction to Finance Tracker

We download the code for and install the dependencies for Finance Tracker and take a look at it on our local Rails server.

Finance Tracker - https://github.com/railsjavascriptcourse/finance-tracker

Application Overview

We review the functionality available in the Finance Tracker app.

Adding AngularJS to the App

We go over the steps to add the AngularJS framework to our Rails app.

Starting the Angular App

We start with the very basics of an AngularJS app without adding any functionality to it at first.

Creating the Repo and Pushing to GitHub

We perform the steps necessary to create our own repo for the app and push our changes to this new repo on GitHub.

Starting to Change Stock Lookup

We begin making changes to the Stock lookup view code to make it less dependent on Rails and easier to use for our AngularJS app.

Setting Up Stocks Controller

We begin building a very basic controller in AngularJS for our Stock lookup functionality.

Changing the Form to Plain HTML

We continue to decouple the frontend dynamic functionality from Rails by changing the markup to be plain HTML and annotated for AngularJS.

The Lookup Function

We fill out the AngularJS stocksController by starting to build the lookup function.

Binding the Results to the Lookup Function

We add some AngularJS magic to our view markup and write AngularJS controller code to wire the two together and show the results of a stubbed out lookup on the Stock lookup view.

Changing the Results Partial from Rails to Angular

We continue to remove Rails from the dynamic parts of the frontend view layer and annotate it with AngularJS directives and template code.

Moving the Results Partial Back into My Portfolio

With the code now simplified, we can get rid of the results partial and have to deal with one less file.

Turning the Rails Controller into an API

We take a look at how a Rails controller method can be changed into a REST API endpoint.

Overview of Changes to the Models

We take a look at the changes necessary to make our models support the new, AngularJS fronted version of Finance Tracker.

Modifying the Stock Model

We make changes to the Stock ActiveRecord model in order to support our new, API-driven approach.

Adding the StockService

We add the initial version of the stockService to our AngularJS app.

Building the Lookup Function

We continue to enhance the functionality of our lookup function in our AngularJS app.

Adding Error Handling to Lookup

We take a look at how to handle errors in an asynchronous, API-backed controller function.

Cleanup and Error Display

We clean up some of our code after the big changes that we have made and get the error display working correctly on the front end

Beginning the Add Functionality

With the lookup part done and working, we begin on changing the add stock part of the app to make it use AngularJS instead of the Rails view.

Error Handling for Add

We start to build the error handling for the add stock functionality.

Converting the UserStock Controller Add Action to API

We take the Rails controller action and convert it to work as a REST API endpoint for the AngularJS app.

Finishing the Add Functionality and Troubleshooting a Bug

We finish up building the add stock functionality and get a chance to take on a bug that is causing errors in our code.

Making the Stock List Display Dynamic

We add some much needed dynamic behavior to the stock list display updating on the front end.

Removing Extra Flash Messages and Wrapping Up

We finish up the AngularJS conversion of the My Portfolio functionality with some changes to what messages from the back end are shown in the main bootstrap flash display.