Chapters

46 Chapters | 4:55:39 |

01

Symfony UX

5:34
02

Setting up Webpack Encore

5:11
03

encore watch & Code Splitting

4:06
04

Stimulus Controllers

5:53
05

Magic with Events, Properties & HTML from Ajax

4:43
06

Targets: Finding Elements

6:41
07

Actions: Listening to Events

4:43
08

Bootstrapping a "Color Selector" Form Element

9:06
09

Actions & currentTarget

6:41
10

Element.dataset

4:52
11

State in your Controller

6:26
12

The Values API

7:03
13

On Value Change Callback

8:07
14

Search Suggestions

5:49
15

Ajax with fetch(), Polyfills & async/await

5:24
16

HTML-Returning Ajax Endpoint

6:06
17

Stimulus Behaviors: stimulus-use

6:37
18

Form Submit Confirmation Controller

6:22
19

Making a Configurable, Reusable Controller

7:47
20

Multi Controller Communication

9:09
21

Listening to An Event From Another Controller

6:25
22

Ajax-Powered HTML Updates & a CSS Transition

5:13
23

Symfony UX & Chart.js

7:48
24

stimulus-bridge: How UX Packages Work

6:55
25

Extending a UX Controller

8:43
26

React (or Vue) ❤️ Stimulus

6:48
27

Pass Server Data Directly to React Props

7:02
28

Webpack Bundle Analyzer

4:58
29

Async/Dynamic import()

7:26
30

Magic: Lazy-Loading UX Controllers

5:13
31

Making your Custom Controllers Lazy

3:58
32

Product CRUD

7:42
33

Opening a Modal

8:14
34

Loading a Form into the Modal

8:46
35

Ajax-Submitting an Entire Form

6:25
36

Correcting the Form Action & Preventing Default

4:30
37

Ajax Form Response Status Codes

9:36
38

Ajax Element Reloading Controller

6:23
39

Dispatching an Event from modal-form

4:25
40

Reusing the "Reload Content" Controller

5:12
41

CSS Transitions with useTransition

7:05
42

CSS Transition Classes

5:03
43

Free 3rd Party Controllers!

4:31
44

Using the autocomplete-controller

9:45
45

Autocomplete with Transitions

6:08
46

useTransition in a Neat, Reusable Module

5:00

> JavaScript Frameworks & Tools > Symfony UX: Stimulus

Buy Access to Course

26.

React (or Vue) ❤️ Stimulus

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

17 Comments

Sort By

Login or Register to join the conversation

Waldifubu 3 years ago

Maybe helpful:

import {Controller} from '@hotwired/stimulus';
import MadeWithLove from "../components/MadeWithLove";
import React from "react";
import ReactDOM from 'react-dom/client';

export default class extends Controller {
    connect() {
        ReactDOM.createRoot(this.element).render(<MadeWithLove/>)
    }
}

3 |

EssKy Waldifubu 1 year ago

Thanks Waldifubu, this version fixed it for me.

November 2024

|

A-Dawg 4 years ago edited

If anyone is getting the warning about reactDom not being supported by react 18.
Change your made-with-love_controller.js to this.

import { Controller } from 'stimulus'
import { createRoot } from 'react-dom/client';
import React from 'react';
import MadeWithLove from "../components/madeWithLove";

export default class extends Controller {
    connect() {
        createRoot(this.element).render(
            <MadeWithLove />
        )
    }
}

3 |

MolloKhan SFCASTS A-Dawg 4 years ago

Thanks for sharing it with others Mathew

|

Stuart-N 1 year ago edited HIGHLIGHTED

lol gave the problem to ChatGPT and it fixed it

import { Controller } from '@hotwired/stimulus';
import ReactDOM from 'react-dom/client'; // Corrected import
import React from 'react';
import MadeWithLove from '../components/MadeWithLove';

export default class extends Controller {
    connect() {
        // Initialize the React app using ReactDOM.createRoot
        ReactDOM.createRoot(this.element).render(<MadeWithLove />);
    }
}

1 |

Victor SFCASTS Stuart-N 1 year ago

Hey Stuart,

ChatGPT might be pretty useful for such thing, well done! :)

Cheers!

|

Stuart-N 1 year ago

I get an error

TypeError: react_dom__WEBPACK_IMPORTED_MODULE_17__.createRoot is not a function

at extended.connect (made-with-love_controller.js:10:18)
at Context.connect (stimulus.js:1498:1)
at Module.connectContextForScope (stimulus.js:1668:1)
at Router.scopeConnected (stimulus.js:2054:1)
at ScopeObserver.elementMatchedValue (stimulus.js:1961:1)
at ValueListObserver.tokenMatched (stimulus.js:999:1)
at TokenListObserver.tokenMatched (stimulus.js:930:1)
at stimulus.js:924:1
at Array.forEach (<anonymous>)

Looks like mine installed version 19 of react.... so ill have to downgrade it I think then overcome any issues i suspect

|

Victor SFCASTS Stuart-N 1 year ago

Hey Stuart,

Yes, you're probably right, we use React v17 in this course, so we would recommend you to use this exact version to match the code in this course. You can try to use React v19, but it may have some BC breaks because of the major version change, so you would need to do more work on your side ot make it working.

Cheers!

|

Wajdi-B 3 years ago

hello! is there any possible way to use React, Stimulus and symfony in the same app? I followed what you did in this episode and i rendered a React component, but when i tried to send data from react to php like submitting a form i couldn't find a way. In my app, i want to build an admin dashboard with side bar buttons that do not refresh the page, in those pages i want to display some data from the database, and each page contains a form that can add data into the database and i want to build those forms and submit and validate them with symfony forms, is there any way to communicate react with symfony through stimulus or something else?

|

weaverryan SFCASTS Wajdi-B 3 years ago

Hey Wajdi-B!

Yes! Actually, it's a bit easier now thanks to the UX React component - https://ux.symfony.com/react - which allows you to really easily render React components and pass server data to React as "props".

I followed what you did in this episode and i rendered a React component, but when i tried to send data from react to php like submitting a form i couldn't find a way.

This makes me wonder, however, if you have a different question. So, in React you want to submit a form to your Symfony backend? Are these forms built with React? Or, what is React's role with these forms?

Cheers!

|

SamuelVicent 5 years ago

Hi! Would be possible to create a video with an example for Vue?

|

MolloKhan SFCASTS SamuelVicent 5 years ago edited

Hey SamuelVicent

Have you watched this video where we set up Vue on a Symfony app? https://symfonycasts.com/sc...
It's quite similar as installing React. Let me know if it helped

Cheers!

|

Mepcuk 5 years ago

How to insert without copy paste from symfonycasts Heart emoji ?
Thanks in advance

|

sadikoff Mepcuk 5 years ago edited

Hey Mepcuk

You can copy paste it from Google =) But it completely depends on your OS. If you share what OS version do you use, then maybe we will be able to help you

Cheers!

|

Mepcuk sadikoff 5 years ago

Ubuntu 20 ))

|

sadikoff Mepcuk 5 years ago edited

IIRC emoji picker is available with ctrl + . shortcut

Hope it will help))

Cheers!

|

Mepcuk sadikoff 5 years ago

Thanks for help

|

This tutorial works perfectly with Stimulus 3!

Symfony 5.2 Stimulus 2

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
        "doctrine/annotations": "^1.0", // 1.11.1
        "doctrine/doctrine-bundle": "^2.2", // 2.2.3
        "doctrine/doctrine-migrations-bundle": "^3.0", // 3.0.2
        "doctrine/orm": "^2.8", // 2.8.1
        "phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
        "sensio/framework-extra-bundle": "^5.6", // v5.6.1
        "symfony/asset": "5.2.*", // v5.2.3
        "symfony/console": "5.2.*", // v5.2.3
        "symfony/dotenv": "5.2.*", // v5.2.3
        "symfony/flex": "^1.3.1", // v1.21.6
        "symfony/form": "5.2.*", // v5.2.3
        "symfony/framework-bundle": "5.2.*", // v5.2.3
        "symfony/property-access": "5.2.*", // v5.2.3
        "symfony/property-info": "5.2.*", // v5.2.3
        "symfony/proxy-manager-bridge": "5.2.*", // v5.2.3
        "symfony/security-bundle": "5.2.*", // v5.2.3
        "symfony/serializer": "5.2.*", // v5.2.3
        "symfony/twig-bundle": "5.2.*", // v5.2.3
        "symfony/ux-chartjs": "^1.1", // v1.2.0
        "symfony/validator": "5.2.*", // v5.2.3
        "symfony/webpack-encore-bundle": "^1.9", // v1.11.1
        "symfony/yaml": "5.2.*", // v5.2.3
        "twig/extra-bundle": "^2.12|^3.0", // v3.2.1
        "twig/intl-extra": "^3.2", // v3.2.1
        "twig/twig": "^2.12|^3.0" // v3.2.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
        "symfony/debug-bundle": "^5.2", // v5.2.3
        "symfony/maker-bundle": "^1.27", // v1.30.0
        "symfony/monolog-bundle": "^3.0", // v3.6.0
        "symfony/stopwatch": "^5.2", // v5.2.3
        "symfony/var-dumper": "^5.2", // v5.2.3
        "symfony/web-profiler-bundle": "^5.2" // v5.2.3
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.13
        "@popperjs/core": "^2.9.1", // 2.9.1
        "@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
        "@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
        "@symfony/webpack-encore": "^1.0.0", // 1.0.4
        "bootstrap": "^5.0.0-beta2", // 5.0.0-beta2
        "core-js": "^3.0.0", // 3.8.3
        "jquery": "^3.6.0", // 3.6.0
        "react": "^17.0.1", // 17.0.1
        "react-dom": "^17.0.1", // 17.0.1
        "regenerator-runtime": "^0.13.2", // 0.13.7
        "stimulus": "^2.0.0", // 2.0.0
        "stimulus-autocomplete": "^2.0.1-phylor-6095f2a9", // 2.0.1-phylor-6095f2a9
        "stimulus-use": "^0.24.0-1", // 0.24.0-1
        "sweetalert2": "^10.13.0", // 10.14.0
        "webpack-bundle-analyzer": "^4.4.0", // 4.4.0
        "webpack-notifier": "^1.6.0" // 1.13.0
    }
}

Previous Chapter

Next Chapter