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

02.

React.createElement()

|

Autoplay

Previous Chapter

Next Chapter

Login or Register to check out the script

17 Comments

Sort By

Login or Register to join the conversation

xmontero 3 years ago edited

Hi, I just bought this amazing course. Congrats Ryan and Frank.

As time elapses, things evolve, I find 2 things that could be worth nothing in "cards" in the videos one for video 1 and the other for this video. I have already posted a separate comment for video 1.

For this video... It happens 2 things:

a) Autocompletion.

After doing the yarn add react react-dom --dev when in PHP Storm, writing import Rea suggests React and finally PhpStorm completes the full statement: import React from "react";

Nevertheless when writing import ReactD does not suggest ReactDom which triggers a thinking about "maybe React and ReactDom are behaving differently and the video treats them as equal in significance from the static analysis point of view.

IDK if this is is related to the next...

b) Warning when executing:

After executing it, the console says

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

I wonder... Should the video tell that after React version 18 things are different? How should I proceed?

|

weaverryan SFCASTS xmontero 3 years ago

Hey again xmontero!

Hmm, yes, my guess is that these are both related! I just added a note about how to run the code in React 18 - let me know if you hit any issues with it. The note is in the script, but here it is again:

// A) the import is slightly different
import { createRoot } from 'react-dom/client';


// B) exactly the same as before
const el = React.createElement('h2', null, 'Lift History!');

// C) to render, you now create a "root" element
//    then render into it
const root = createRoot(document.getElementById('lift-stuff-app'));
root.render(el);

We'll add a video note for that as well.

Thanks!

1 |

xmontero weaverryan 3 years ago

As stated, it works! Thnx!

|

Skylar 7 years ago

Hello guys,

In my phpstorm, the parameter hint box show many lines as opposed to the single line shown in the video. Do you know why, what is it displaying and how to use it?

Here is a screen snip:
https://pasteboard.co/If7CF...

Thank you for the work you do and all these wonderful tutorials.

|

MolloKhan SFCASTS Skylar 7 years ago edited

Hey Skylar

Try changing your JS language version to "React JSX" inside settings -> Languages & Frameworks -> Jasvascript

Cheers!

|

Skylar MolloKhan 7 years ago edited

MolloKhan Thank for the reply, but it was already set to "React JSX"

|

MolloKhan SFCASTS Skylar 7 years ago

Hmm, have you tried asking it on PHPStorm site comments? I think PHPStorm autocomplete JS based on libraries you have installed but I'm not sure how you can adapt it to your needs

|

Authoritas 7 years ago

Why would use --dev when adding react and react-dom? Surely they'll both be needed in production?

|

weaverryan SFCASTS Authoritas 7 years ago edited

Hey Authoritas!

Great question! This is a confusing detail... that's actually not important at all. In fact, react and react-dom will NOT be used on production. Well, to be more accurate, we do not need the node_modules/react and node_modules/react-dom directories to be available on production. That's because, during deploy, we will have used Webpack to pack them into some final JavaScript files. Ultimately, on production, we don't even need node installed, or any of the packages to be installed.

Of course, if you're like me, 100% of your Node packages are being used in this way. But, in theory, someone could build an app where they have a combination of things like react & react-dom that are "processed" by Webpack AND a few other node libraries that truly *are* being used at runtime, in the production server. So, that's why I like to keep the react, webpack, etc stuff in require-dev :).

Cheers!

|

Authoritas weaverryan 7 years ago

Thanks very much. I kind of figured that might have been the case. That makes sense. It's all beginning to click!! 🙂Presumably, if you do use yarn add {package_name} without the --dev flag accidentally and just yarn remove {package_name} and then add it back in with the --dev (yarn add {package_name} --dev), all this is doing is juggling the package's key/value pair in your package.json file deleting the required directories in ./node-modules and then adding them back. You could, of course, just do this manually by simply editing your package.json directly?

|

MolloKhan SFCASTS Authoritas 7 years ago edited

Hey Authoritas

> You could, of course, just do this manually by simply editing your package.json directly?

You're totally correct, you can just do it manually and everything will work fine

|

Skylar 8 years ago

How did you get to choose from a popup selection of emojis in Phpstorm ?

|

weaverryan SFCASTS Skylar 8 years ago edited

Hey Skylar!

Ha! I see you are paying attention to the important details ;). Actually, this is an OSX shortcut - not from PhpStorm. It's control+command+spacebar on OSX to bring up that menu anywhere. I... kinda use it all the time.

Cheers!

|

Skylar weaverryan 8 years ago

Well, I found an answer so let me share. Microsoft has added a dedicated Emoji Panel or Picker to Windows 10 v 1709. Press Windows Key + Period (.) or Windows Key + semicolon (;) to bring up Emoji Panel. https://www.thewindowsclub....

|

MolloKhan SFCASTS Skylar 8 years ago

That's great! Thanks for sharing it :)

|

Amine Tzouk 8 years ago

HI,
I hope we will have the next tutorials soon.

best regards.

|

weaverryan SFCASTS Amine Tzouk 8 years ago edited

Hey Amine Tzouk!

We'll release a new video every day - so very soon! :)

|

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