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

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

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

An external database is not needed which in turn makes the application less complicated when using contexts and reducers in React.

The application is reduced periodically with this pattern --- that means you end up with less code.

Props are not needed to be passed around which makes the code and the application simpler.

What is the benefit of using contexts and reducers in React?

What is the benefit of using contexts and reducers in React?

```
export interface IsVenueContext {
 state: VenueState
 dispatch: React.Dispatch<VenueAction>
}
```

Which of the following creates a React context object?

Which of the following creates a React context object?

Using the `useContext` hook means that the component will be refreshed if the context change.

Using the <code>useContext</code> hook means that the component will be refreshed if the context change.

`const context = React.useContext<IsVenueContext>(null)`

`const context = React.useContext<IsVenueContext>(VenueContext)`

`const context = React.useContext<IsVenueContext>(VenueHeader)`

Which line of code is correct to create a context object in the `VenueHeader` component?


Which line of code is correct to create a context object in the <code>VenueHeader</code> component?

It creates a context with the data `null`.

It creates a context with the initial value `Subscription`.

It creates a context with the initial value `null`.

Which of the following is true about the following line?

```
SubscriptionContext = React.createContext<Subscription>(null)
```

Which of the following is true about the following line?
<pre><code>SubscriptionContext = React.createContext&lt;Subscription&gt;(null)
</code></pre>

Test your knowledge of state management with React in this lesson. 

Quiz Yourself on Managing State in React

Test your knowledge of state management with React in this lesson.

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

Quiz Yourself on Managing State in React