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

03.

JSX

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

13 Comments

Sort By

Login or Register to join the conversation

Manpreet-K 2 years ago

Hi, I am learning react. Is it still okay to follow these tutorials. I am not concerned about symfony's version here, just want to focus on react. I am asking because this course is marked as archived.

|

Victor SFCASTS Manpreet-K 2 years ago

Hey Manpreet,

This course might be still a good one in case you want to get acquainted with React and its features. But the React version that's used in the tutorial is v16, while the latest version is v18. So some BC break changes were done to the framework since this course was recorded, so you just need to keep it in mind. Also, you may want to check the version of React that is used in your own project, probably it's matches the major version that is used in this course - that it would be perfect for you then. If not, still this course might be useful for you but the latest version may have some differences in behavior and syntax.

I hope that helps!

Cheers!

|

Gustavo 6 years ago

Hi, i got this error in my browser console:

Module build failed (from ./node_modules/babel-loader/lib/index.js):

and i solved it adding this in my webpack.config.js:

.configureBabel(() => {}, {
useBuiltIns: 'usage',
corejs: 3
})

Thanks!

|

weaverryan SFCASTS Gustavo 6 years ago edited

Hey Gustavo!

Thanks for the tip! I'm surprised you got an error specifically, but this logic IS now recommended in Encore (and you should get it by default when you install Encore these days).

Cheers!

|

Zacarías C. 6 years ago

Hello,

congratulations on the tutorial, it's great;)

I have this problem when extending ESLint with eslint-plugin-react, PHPStorm "says" that it cannot find the eslint-plugin-react module.

- the dependency exists and so it appears in package.json,
- webpack compiles cin showing no errors,
- ESLint is configured in PHPStorm with the automatic configuration option,
- the node interpreter is 12.10.0,
- the version of PHPStorm the 2019.2.3

Why is PHPStorm so angry with me?

Thanks in advance for any suggestions.

|

Zacarías C. Zacarías C. 6 years ago

Solved! A bad ESLint PHPStorm configuration :)

1 |

Roberto Briones Argüelles 7 years ago

What do you use to get the balloon notifications in iTerm? :P

|

weaverryan SFCASTS Roberto Briones Argüelles 7 years ago edited

Hey Roberto Briones Argüelles!

That comes from Webpack Encore, which leverages webpack-notifier :). https://github.com/symfony/...

Fun, right?

Cheers!

|

Imad Zairig 7 years ago edited

Hi,
i don't know why in my case i have always the same probleme, can't process jsx syntax in the section https://knpuniversity.com/screencast/reactjs/jsx#jsx-amp-the-babel-react-preset, i've installed all of that yarn add --dev react react-dom prop-types babel-preset-react and added .enableReactPreset() !!

the same error :


 2 | import ReactDom from 'react-dom';
> 3 | const el = <h2>Lift Stuff! <span>❤️</span></h2>;
    |            ^

|

weaverryan SFCASTS Imad Zairig 7 years ago edited

Hey Imad Zairig !

Hmmm - yea, you're right - it looks like Babel still does not like your JSX syntax! Did you make sure to stop and restart Encore after adding .enableReactPreset()? If you did, then I'd love to see your full webpack.config.js file and know exactly what command you're using to run Encore :).

Cheers!

|

Imad Zairig weaverryan 7 years ago edited

Hi weaverryan ,

sorry, the probleme is caused by .babelrc file , once i delete it it works perfectly (y) ,

Thanks,

2 |

Imad Zairig weaverryan 7 years ago

Yes i did restart Encore, this is my webpack.config.js
var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
Encore
// the project directory where all compiled assets will be stored
.setOutputPath('public/build/')
// the public path used by the web server to access the previous directory
.setPublicPath('/build')
.createSharedEntry('layout', './assets/js/layout.js')
.addEntry('rep_log', './assets/js/rep_log.js')
.addEntry('rep_log_react', './assets/js/rep_log_react.js')
.addEntry('login', './assets/js/login.js')
.enableBuildNotifications()
// fixes modules that expect jQuery to be global
.autoProvidejQuery()
.addPlugin(new CopyWebpackPlugin([
// copies to {output}/static
{ from: './assets/static', to: 'static' }
]))
.enableSassLoader()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableVersioning(Encore.isProduction())
.enableReactPreset()
;
// export the final configuration
module.exports = Encore.getWebpackConfig();

and I run

yarn run encore dev --watch

|

Imad Zairig Imad Zairig 7 years ago edited

Hi Imad Zairig

i did work when i added "plugins": ["transform-react-jsx"] in .babelrc and without setPresetReact.

|

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