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

Any changes to React's virtual DOM result in a complete redraw of the actual DOM.

<p>Any changes to React’s virtual DOM result in a complete redraw of the actual DOM.</p>


Can functional components maintain internal state?

<p>Can functional components maintain internal state?</p>


What's the prop in this react component?

`<Seat seatNumber={seatNumber} />`

<p>What’s the prop in this react component?</p>
<p><code>&lt;Seat seatNumber={seatNumber} /&gt;</code></p>


```
return (
  <>
    <div>One thing</div>
    <div>Another thing</div>
  </>
)
```

```
return (
    <div>One thing</div>
    <div>Another thing</div>
)
```

```
return (
    <div>One thing</div>, <div>Another thing</div>
)
```

Suppose you wish to return two or more elements that don't have a parent element. How will you go about this?



<p>Suppose you wish to return two or more elements that don’t have a parent element. How will you go about this?</p>


```
let spanItem
if (x === true) {
  spanItem = <span>False</span>
} else {
  spanItem = <span>True</span>
}
return <div>{spanItem}</div>
```

```
let spanItem
if (x === true) {
  spanItem = <span>True</span>
} else {
  spanItem = <span>False</span>
}
return <div>{spanItem}</div>
```

```
let spanItem
if (x === false) {
  spanItem = <span>True</span>
} else {
  spanItem = <span>False</span>
}
return <div>{spanItem}</div>
```

Which of the following is equivalent to:

```
return (
  <div>
    (x === true) ? <span>True</span> : <span>False</span>
  </div>
)
```

<p>Which of the following is equivalent to:</p>
<pre><code>return (
  &lt;div&gt;
    (x === true) ? &lt;span&gt;True&lt;/span&gt; : &lt;span&gt;False&lt;/span&gt;
  &lt;/div&gt;
)
</code></pre>


If you render a list without a key, React will place a warning in the browser console at runtime.

`key` is an internal property used by React to enable the React runtime to differentiate between elements in a list and render only the ones that have changed so the performance will suffer.

Why is it important to render a list with a key?

<p>Why is it important to render a list with a key?</p>


Is the following code valid?

```
export const Seat = (props: SeatProps) => {

  function changeState(): void {
      const [status, setStatus] = React.useState(props.initialStatus) 
    if (status === "open") {
      setStatus("held")
    } else if (status === "held") {
      setStatus("open")
    }
  }

  function stateDisplayClass(): string {
    if (status === "open") {
      return "has-background-white"
    } else if (status === "held") {
      return "has-background-success"
    } else {
      return "has-background-warning"
    }
  }

  return (
    <td>
      <span className={`button ${stateDisplayClass()}`} onClick={changeState}>
        {props.seatNumber}
      </span>
    </td>
  )
}
```

<p>Is the following code valid?</p>
<pre><code>export const Seat = (props: SeatProps) =&gt; {

  function changeState(): void {
      const [status, setStatus] = React.useState(props.initialStatus) 
    if (status === &quot;open&quot;) {
      setStatus(&quot;held&quot;)
    } else if (status === &quot;held&quot;) {
      setStatus(&quot;open&quot;)
    }
  }

  function stateDisplayClass(): string {
    if (status === &quot;open&quot;) {
      return &quot;has-background-white&quot;
    } else if (status === &quot;held&quot;) {
      return &quot;has-background-success&quot;
    } else {
      return &quot;has-background-warning&quot;
    }
  }

  return (
    &lt;td&gt;
      &lt;span className={`button ${stateDisplayClass()}`} onClick={changeState}&gt;
        {props.seatNumber}
      &lt;/span&gt;
    &lt;/td&gt;
  )
}
</code></pre>


Test yourself on using React with Ruby on Rails 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 Using React With Rails