Gain insights into building applications using Rails Webpacker, Webpack, and TypeScript. Explore Stimulus, React, state management, and communication with servers for richer interactions.

railspostgresssl.tar.gz

introduction/01

introduction/02

introduction/03

introduction/04

introduction/05

introduction/06

stimulus/01

stimulus/02

stimulus/03

stimulus/04

stimulus/05

stimulus/06

react/01

react/02

react/03

react/04

css/01

css/02

css/03

server/01

server/02

server/03

server/04

server/05

server/06

state/01

state/02

state/03

state/04

state/05

state/06

adv_types/01

adv_types/02

adv_types/03

testing/01

testing/03

all_stimulus/01

all_react/01

introduction/01_testing

testJob

introduction/01-copy

introduction/02-copy

introduction/03-copy

introduction/04-copy

introduction/05-copy

introduction/06-copy

stimulus/01-copy

stimulus/02-copy

stimulus/03-copy

stimulus/04-copy

stimulus/05-copy

stimulus/06-copy

react/01-copy

react/02-copy

react/03-copy

react/04-copy

css/01-copy

css/02-copy

css/03-copy

server/01-copy

server/02-copy

server/03-copy

server/04-copy

server/05-copy

server/06-copy

state/01-copy

state/02-copy

state/03-copy

state/04-copy

state/05-copy

state/06-copy

adv_types/01-copy

adv_types/02-copy

adv_types/03-copy

all_stimulus/01-copy

introduction/01-copy-r0guf3

react/02-copy-copy

In this course, you will learn to build a fully-functional application with Rails Webpacker, Webpack, and TypeScript.

To kick things off, you’ll walk through the basics of getting Rails set up to use Webpacker which will serve JavaScript and CSS to the browser. You’ll then get acquainted with Stimulus and React which will help with creating richer interactions.

In the latter half, you’ll work with TypeScript and set up communication between a server. Beyond that, you’ll work through managing state in your Stimulus code, as well as how to test and troubleshoot your application.

By the end of this course, you will be well equipped to create larger, more complex applications that make use of modern tools.

Modern Front-end Development for Rails

# The tools we'll use

Throughout this course, we'll walk through the basics of getting Rails set up to use Webpacker to serve JavaScript and CSS to the browser. Then we will write some code to get the browser to do things. We'll talk primarily about three tools---TypeScript, webpack, and Webpacker---which will be the foundation of our application:

- [TypeScript](https://www.typescriptlang.org) is an extension of JavaScript that provides type checking and type inference, which means that TypeScript enforces that the expressions (variables, functions, etc.) in your code have the correct types. It's a superset of JavaScript, which means that any JavaScript program is valid TypeScript, but it also allows you to add some basic type checking to your code. More advanced usage allows you to use the type system to prevent invalid states at compile-time and can prevent run-time errors.

- [Webpack](https://webpack.js.org) calls itself a "static module bundler," which I think is pretty jargony, not that anybody asked me.  Webpack's entire purpose is to convert developer-friendly inputs to browser-friendly outputs. The inputs are the code you write---JavaScript, TypeScript, CSS, what have you---all arranged in a logical structure. Webpack converts all the files to JavaScript and CSS that the browser can understand, which involves translating code and also resolving references to code in different files. The converted HTML, CSS, and JS files can then be sent to a browser.

- [Webpacker](https://github.com/rails/webpacker) is a Rails-specific front-end wrapper around webpack. I realize the similarity in names here is confusing; I'll try to make it as clear as possible when I'm referring to one tool or the other. The most important thing Webpacker gives is some Rails-style convention over configuration structure to your Webpack builds. It also builds in support for common tools and adds default setups for common frameworks like the ones we'll be using in this course.

# Course structure

This course is divided into four parts comprising of 15 chapters:

- **Part I** ([Client-side Rails](https://www.educative.io/courses/modern-front-end-rails/introduction-to-using-rails-on-the-client-side) - [Cascading Style Sheets](https://www.educative.io/courses/modern-front-end-rails/introduction-to-css)): we'll get an introduction to Rails tools we need for the front-end. We'll use Stimulus and then React for richer interactions. Then we'll augment both tools (Stimulus and React) by showing some great ways to use CSS tools in our applications. 
- **Part II** ([TypeScript](https://www.educative.io/courses/modern-front-end-rails/introduction-to-typesscript) - [Talking to the Server](https://www.educative.io/courses/modern-front-end-rails/introduction-to-talking-to-the-server)): we’ll take a deeper look at TypeScript, Webpack, and webpacker. Later on, we’ll look at an important concern for front-end code: communicating with the server.

- **Part III** ([Managing State in Stimulus Code](https://www.educative.io/courses/modern-front-end-rails/introduction-to-managing-state-in-stimulus-code) - [Using Redux to Manage State](https://www.educative.io/courses/modern-front-end-rails/introduction-to-using-redux-to-manage-state)): we’ll look at managing the state of the data in the client-side application. We'll look at a common JavaScript pattern called a _reducer_ and then talk about Redux, a library that implements the reducer pattern and is commonly used with React.

- **Part IV** ([Validating Code with Advanced TypeScript](https://www.educative.io/courses/modern-front-end-rails/introduction-to-validating-code-with-advanced-typescript) - [More Testing and Troubleshooting Basics](https://www.educative.io/courses/modern-front-end-rails/introduction-to-testing-and-troubleshooting-basics)):  we’ll go a little further into TypeScript, learning how we can use the type system to prevent error conditions. We’ll then talk about debugging and testing our applications.



Here's a rundown of what to expect from this course.

Course Organization and Tools

Getting Started

Client-side Rails

Stimulus

React

Cascading Style Sheets

TypeScript

Webpack

Webpacker

Talking to the Server

Managing State in Stimulus Code

Managing State in React

Using Redux to Manage State

Validating Code with Advanced TypeScript

Testing with Cypress

More Testing and Troubleshooting Basics

Appendix

Course Organization and Tools

The tools we’ll use