Chapters

43 Chapters | 5:00:38 |

01

The World of React + ESLint

8:13
02

React.createElement()

6:40
03

JSX

6:27
04

React Components

8:50
05

Props

6:40
06

Collection & Rendering a Table

6:28
07

The key Prop & Inline Rendering

4:38
08

Build the Static App First

8:05
09

State: For Magic Updating Good Times

8:32
10

Handling Events (like onClick)!

4:41
11

Child Component

8:35
12

Notifying Parent Components: Callback Props

5:24
13

Smart vs Dumb Components

8:48
14

Prop Validation: PropTypes

6:40
15

Removing propTypes on Production

3:01
16

Moving the Rep Logs to State

5:01
17

Smart Components & Spread Attributes

6:06
18

Handling a Form Submit

8:24
19

New Component to Hold our Form

8:25
20

Refs

9:36
21

Immutability / Don't Mutate my State!

8:34
22

Dumb Components with State

4:53
23

Form Validation State

5:12
24

Controlled Form Input

9:20
25

Controlled Component Form

9:17
26

Deleting Items

6:15
27

API Setup & AJAX with fetch()

7:14
28

API Auth & State via AJAX

7:33
29

Loading Messages

3:38
30

Hitting the DELETE Endpoint

6:37
31

The POST Create API

9:04
32

Polyfills: fetch & Promise

5:19
33

Success Messages + The Style Attribute

6:27
34

Temporary Messages & componentWillUnmount

6:14
35

Updating Deep State Data

7:12
36

Server Validation & fetch Failing

5:59
37

Displaying Server Validation Errors

7:40
38

...Object Rest Spread

6:40
39

Passing Data from your Server to React

7:11
40

Passing Server Data to React Props

8:45
41

Reusable Components

9:14
42

CSRF Protection Part 1

5:25
43

CSRF Protection Part 2

7:39

This course is archived!

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).

> JavaScript Frameworks & Tools > React with Symfony

Buy Access to Course

04.

React Components

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

16 Comments

Sort By

Login or Register to join the conversation

Mahmut-A 8 months ago

Hi,

I am using a template which is written by typescript+react. I want to import this template by using vite ( not webpack) to symfony.
Do you have any process for this to help me? ı am really stuck for this.

thank you.

|

Victor SFCASTS Mahmut-A 8 months ago

Hey Mahmut,

Unfortunately, we don't have a course about Vite yet... and I personally haven't used that yet in a real project. Butin theory yuo should create Vite config file in your Symfony project root dir where you should enable React plugin and set up output dir. Btw, maybe vite-plugin-symfony will help you more, but I personally haven't used that yet too. There's also lhapaipai/vite-bundle bundle that should help with the Vite integration in your Symfony app, I would recommend you to take a look at their docs for more information about the process of integration.

I hope that helps!

Cheers!

|

Evandro 3 years ago

Hello Guys, im trying to execute the integration between Symfony 6 and React 18 but once I ran the npm run watch the encore compile the JS files twice and after the 3 modification it keep compiling without error BUT it does not update the files int the public folder anymore. it a fresh new project. is someone facing this issue? I already tryed react 17 and 18 the result is the same.

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('main', './assets/main.js')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = '3.23';
    })
    //.enableSassLoader()
    //.enableTypeScriptLoader()
    .enableReactPreset()
;

module.exports = Encore.getWebpackConfig();

// assets/main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './styles/app.css'


ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
        <App/>
    </React.StrictMode>
)

// assets/app.jsx
import React, {useState} from 'react'
const App = () =>{

    const [count,setCount] = useState(0);
    return (
        <div>
            <div>Hello World! count: {count}</div>
            <button
                onClick={() => setCount(count +1)}
            >
                CLICK
            </button>s
        </div>
    )
}
export default App;

and my twig file

<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {% block stylesheets %}
            {{ encore_entry_link_tags('main') }}
        {% endblock %}

        {% block javascripts %}
            {{ encore_entry_script_tags('main') }}
        {% endblock %}
    </head>
    <body>
        <div id="root"></div>
        {% block body %}{% endblock %}
    </body>
</html>

|

weaverryan SFCASTS Evandro 3 years ago

Hey @Dominik!

This is super weird behavior. It's even STRANGER because I've never heard of an issue like this... until 3 days ago when someone else had something that sounds VERY similar. I'm not sure if this will be relevant to you, but I hope it will be - https://github.com/symfony/webpack-encore/issues/1209#issuecomment-1560650833

Cheers!

|

Brice N. 6 years ago edited

Hello ! I followed the tutorial but it looks like I have a javascript error in my browser's console


Uncaught TypeError: Cannot read property 'render' of undefined
    at Object../assets/js/react/form/registration.tsx (registration.tsx:14)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at registration_form.js:1

my code is


import React = require('react');
import ReactDOM from 'react-dom';

class RegistrationForm extends React.Component {
    render() {
        return (
            <div>
                <p>test</p>
            </div>
        );
    }
}

ReactDOM.render(<RegistrationForm/>, document.getElementById('registration-form'));

I may have done something wrong but I'm not sure of what, I've reviewed the actions made in the tutorials and I don't think to have missed anything

|

Victor SFCASTS Brice N. 6 years ago

Hey Infrandomness,

Hm, could you follow the next steps:
$ rm -rf node_modules/
$ yarn install
$ yarn run encore dev --watch

I.e. just basically re-install all the Node dependencies and re-build the assets with Encore and try again. Do you see the same error? Btw, did you download the course code and bootstrap the project from start/ folder? Or do you apply changes on your own project?

Cheers!

|

Brice N. Victor 6 years ago

HI ! Thanks for your answers !

First of all, I successfully fixed my project.
As I wrote my components in typescript, I forgot to install the @types packages of both react and react-dom

To answer your questions :
I apply the changes to my own project as I watch the tutorials

|

Victor SFCASTS Brice N. 6 years ago

Hey Random,

I'm happy you fixed it, well done! And thanks for sharing your solution.

Cheers!

|

Shaun T. 7 years ago

Hi guys,

If you have separate pages on your app, would you have to create separate React apps? For example PostListApp, PostShowApp?

|

weaverryan SFCASTS Shaun T. 7 years ago edited

Hey Shaun T.!

Great question! Yes. Well, probably yes. In your example, these indeed sound like 2 totally separate "apps". So yes, I would set it up like you are (the cool thing is if there is some shared logic, you can extract that into components that each app uses). If you're building a traditional app, each page would have a different webpack "entry" that would initialize the correct "app". If you're building a single-page app, you'll likely use React router (a topic we didn't have time for). React router is a pretty simple idea: based on the URL, it "renders" different components. For example, you might configure /posts to render PostListApp and /posts/5 to render PostShowApp.

Cheers!

|

Jovan P. 8 years ago

If I vaguely recall, this was mentioned in another Encore course, **but**, once we externalize the RepLogApp's code into separate file, webpack does not pick it up automatically :) We need to restart it in order to keep things smooth and not be slapped by "RepLogApp is undefined" error :)

Version info:
└─ webpack@3.12.0
└─ @symfony/webpack-encore@0.19.0

|

Victor SFCASTS Jovan P. 8 years ago

Hey Jovan,

You need to restart webpack encore only if you change webpack.config.js, i.e. when add a new entry point. But if you just move a class into a separate file that you just want to import in an existent and known for webpack encore entry point - it will work, so you don't need to restart it.

Cheers!

|

Amy anuszewski 8 years ago

Stupid question time. We already have a class RepLogApp in our RepLogApp.js file . Why is nothing complaining about the duplicate name?

|

Victor SFCASTS Amy anuszewski 8 years ago

Hey Amy,

Because this is JavaScript? :p To be serious, probably because we moved that RepLogApp class into its own file assets/js/RepLog/RepLogApp.js. I mean, after we copied it from assets/js/rep_log_react.js and pasted into assets/js/RepLog/RepLogApp.js - we completely removed it from assets/js/rep_log_react.js and import RepLogApp in this file from assets/js/RepLog/RepLogApp.js. Does it makes sense to you? Oh, and yes, that's because of the scope, each file have its own scope, so I can declare variables, classes, etc. with the same names but in different files.

Cheers!

|

Amy anuszewski Victor 8 years ago

Actually, I'm asking about js/Components/RepLogApp.js (which is powering the legacy app) and /js/RepLog/RepLogApp.js which is powering the new version. Both have the exact same class name. I see now that the import is directory based and therefore each entry point is able to use only the code it knows about, but at first it seems like it would cause all sorts of havoc.

|

Victor SFCASTS Amy anuszewski 8 years ago

Hey Amy,

Yeah, agree, and you should avoid duplicating class names in your project even if it works because you never import them both in one file. That's because we were doing refactoring step by step, but probably in a real project would be cool to change that legacy class name to something like LegacyRepLogApp etc. It requires a bit more work, but will be clearer.

Cheers!

|

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).

Symfony 4 React 16

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.2.0",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // v1.8.0
        "doctrine/doctrine-bundle": "^1.6", // 1.9.1
        "doctrine/doctrine-cache-bundle": "^1.2", // 1.3.3
        "doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
        "doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
        "doctrine/orm": "^2.5", // v2.7.2
        "friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
        "friendsofsymfony/user-bundle": "dev-master#4125505ba6eba82ddf944378a3d636081c06da0c", // dev-master
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.2.0
        "symfony/asset": "^4.0", // v4.1.4
        "symfony/cache": "^3.3|^4.0", // v4.1.4
        "symfony/console": "^4.0", // v4.1.4
        "symfony/flex": "^1.0", // v1.21.6
        "symfony/form": "^4.0", // v4.1.4
        "symfony/framework-bundle": "^4.0", // v4.1.4
        "symfony/lts": "^4@dev", // dev-master
        "symfony/monolog-bundle": "^3.1", // v3.3.0
        "symfony/polyfill-apcu": "^1.0", // v1.9.0
        "symfony/property-access": "^3.3|^4.0", // v4.1.4
        "symfony/property-info": "^3.3|^4.0", // v4.1.4
        "symfony/serializer": "^3.3|^4.0", // v4.1.4
        "symfony/swiftmailer-bundle": "^3.1", // v3.2.3
        "symfony/twig-bundle": "^4.0", // v4.1.4
        "symfony/validator": "^4.0", // v4.1.4
        "symfony/yaml": "^4.0", // v4.1.4
        "twig/twig": "2.10.*" // v2.10.0
    },
    "require-dev": {
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.7
        "symfony/debug-bundle": "^3.3|^4.0", // v4.1.4
        "symfony/dotenv": "^4.0", // v4.1.4
        "symfony/maker-bundle": "^1.5", // v1.5.0
        "symfony/phpunit-bridge": "^4.0", // v4.1.4
        "symfony/stopwatch": "^3.3|^4.0", // v4.1.4
        "symfony/var-dumper": "^3.3|^4.0", // v4.1.4
        "symfony/web-profiler-bundle": "^3.3|^4.0", // v4.1.4
        "symfony/web-server-bundle": "^4.0" // v4.1.4
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "dependencies": {
        "@babel/plugin-proposal-object-rest-spread": "^7.12.1" // 7.12.1
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0", // 7.12.5
        "@symfony/webpack-encore": "^0.26.0", // 0.26.0
        "babel-plugin-transform-object-rest-spread": "^6.26.0", // 6.26.0
        "babel-plugin-transform-react-remove-prop-types": "^0.4.13", // 0.4.13
        "bootstrap": "3", // 3.3.7
        "copy-webpack-plugin": "^4.4.1", // 4.5.1
        "core-js": "2", // 1.2.7
        "eslint": "^4.19.1", // 4.19.1
        "eslint-plugin-react": "^7.8.2", // 7.8.2
        "font-awesome": "4", // 4.7.0
        "jquery": "^3.3.1", // 3.3.1
        "promise-polyfill": "^8.0.0", // 8.0.0
        "prop-types": "^15.6.1", // 15.6.1
        "react": "^16.3.2", // 16.4.0
        "react-dom": "^16.3.2", // 16.4.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.0", // 7.3.1
        "sweetalert2": "^7.11.0", // 7.22.0
        "uuid": "^3.2.1", // 3.4.0
        "webpack-notifier": "^1.5.1", // 1.6.0
        "whatwg-fetch": "^2.0.4" // 2.0.4
    }
}

Previous Chapter

Next Chapter