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 >

Course Overview

React with Symfony

Unlock your potential with our React & Symfony tutorial. Learn JSX, state management, and API calls.

Buy Access

4378 students
EN Captions
EN Script
Certificate of Completion

Your Guides

Frank de Jonge

Ryan Weaver

About this course

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and 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
    }
}

ReactJS! Woohoo! With ES6 and webpack behind us, we can finally have some serious fun! In this course, we'll introduce ReactJS, get it working through Webpack and starting building a real application. Yes, a real application! We'll identify a set of strategies & best practices to follow to put this super powerful tool under your control!

Components & React Architecture
Jumping into JSX!
All about props & state
The component data from: from top to bottom
Actual best-practices for creating sane apps
Smart/container vs Dumb/presentation components
PropTypes!
Tricks for managing state without mutating it
Making API Calls back to Symfony (and authentication) with fetch
Working with server-side validation
Handling collections in React
Dealing with forms (refs vs controlled inputs)

return (
    <ReactJSSymfonyTutorial onWatch={this.handleMadNewSkills}
)

88 Comments

Sort By

Jeremy Jumeau 6 years ago

Looking forward for this course and get the best of React+Symfony! Thank you Ryan and your team for teaching us to go further and further with so much enthousiasm.

4 | Reply |

Vince Liem 6 years ago

Still can't wait for this course. But I said that too a few months ago... So the parameters are wrong and I can wait... But not this time

Can't wait :D

4 | Reply |

MolloKhan SFCASTS Vince Liem 6 years ago

Haha, that was funny ;)

Sorry for delaying this tutorial, but right now we are focused on releasing Symfony4 tutorials, I hope you can enjoy them as well

Cheers!

| Reply |

Greg Maka MolloKhan 6 years ago

Do you guys have a timeframe when this course will be released?

1 | Reply |

Victor SFCASTS Greg Maka 6 years ago

Hey Greg,

Unfortunately we don't have strict timeframes, but I think this course will definitely be released after Webpack Encore one, on which we're working on right now. The reason is that we need Webpack Encore for ReactJS course. Thanks for your patience!

Cheers!

1 | Reply |

Christopher Jackson 6 years ago

Please I am also very interested in this course!!!

3 | Reply |

Christophe Lablancherie 6 years ago

Hi,

This course is always planned ? ^^ i've seen thoses for JS and still planning sinces 2 years, maybe nearly three ^^'

2 | Reply |

Victor SFCASTS Christophe Lablancherie 6 years ago

Hey Christophe,

You're right, haha. This course was frozen... but Ryan recently have started to work actively on it, so we really will have it soon ;)

Cheers!

3 | Reply |

Jon Kamke Victor 6 years ago

How soon is soon : (

1 | Reply |

Victor SFCASTS Jon Kamke 6 years ago

Hey guys,

Sorry for the delay, unfortunately we don't have a specific release date for this course yet and were releasing a few other non-JS tutorials lately. But anyway, this course will be released only after the "JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness" course. You may press "Notify me when course is available" button to be notified as soon as possible.

Cheers!

| Reply |

Andrew 6 years ago

Are we there yet? :(

1 | Reply |

MolloKhan SFCASTS Andrew 6 years ago

Hey @Andrew

I can't give you a specific release date, but what can I tell you is that this course is not frozen anymore!
You can subscribe to our mailing list, or click on "Notify me.." button, so you receive an email as soon as this course is published.

Cheers!

1 | Reply |

pasquale_pellicani 1 year ago

I arrived too late for this very interesting course, today with symfony 6.3 how valid is this course still ? Thank you

| Reply |

MolloKhan SFCASTS pasquale_pellicani 1 year ago edited

Hey @pasquale_pellicani

The integration between Symfony and React it's almost the same. Actually, it got simpler thanks to Webpack Encore. On the other hand, you may find some old ways of working with React because React changes too quickly, although, I'd say the majority of the concepts are still relevant

Cheers!

1 | Reply |

Maciej-J 2 years ago

Is this course up to date or am I better of learning React from some newer courses? If it is up to date should I do this track first before starting this course -> 'Track Learn JavaScript'? Thanks.

| Reply |

weaverryan SFCASTS Maciej-J 2 years ago edited

Hey Maciej J.!

This course is definitely showing its age - it should likely still give you a solid foundation for React, but it was written a few years ago, so it will lack some of the newer features and likely best practices. The code itself (if you download the course code) is also now quite old, and won't work on newer versions of PHP. But if you have questions along the way, we can help :).

About the JavaScript track, even though they are also now a few years old, I still think https://symfonycasts.com/sc... and https://symfonycasts.com/sc... are *awesome*. These will give you foundation and insight into parts of JavaScript that will be useful no matter what you do. They aren't "intro to JavaScript" courses, but rather help get your understanding deeper into how JS works, event propagation, the weird "this" keyword, etc.

Let me know if that helps! Cheers!

| Reply |

Kevin 2 years ago

Hi,

Should I learn React on it's own before starting this? This course sounds like it only connects the 2 together and it seems prior knowledge is needed(?).

| Reply |

MolloKhan SFCASTS Kevin 2 years ago edited

Hey Kevin

You can watch this course even if you're new to React. As you said, this course connects both things (Symfony & React) but you'll be able to apply all of the concepts outside from a Symfony app if you desire. The only thing that would change is the setup because this course relies on Symfony Encore

Cheers!

| Reply |

Skylar 5 years ago edited

Hey guys,

Thank you for so much great information!

I would like to know how you would refactor shared code included in webpack.config.js with this line: .createSharedEntry('layout', './assets/js/layout.js') since it does not work with .splitEntryChunks() . Would you import layout.js to each entry point?

| Reply |

weaverryan SFCASTS Skylar 5 years ago edited

Hey Skylar!

Sorry for the super slow reply - this got on my list... and I got busy 😇

It depends... on what's inside layout.js :). The short answer is that each entry should import all the stuff that it needs. I typically have one normal entry called "app", which is my "layout" entry - contains any CSS and JS that I need globally. I include this in each page. Then, for my other, page-specific entries, I do not import "app". Instead, I import whatever code I need to get my job done. If the "app" entry and other entries both import the same code, then it may get "split". Also, back with the shared entry, you were "incentivized" to import libraries inside your "layout" entry that you maybe didn't even need in that specific entry, but that you knew would be used by other entries and you wanted that code to be "shared". With the splitEntryChunks(), that's not the case anymore: make each entry/file as lean and mean as you can (only importing the stuff you really need) and let Webpack figure out the splitting.

Let me know if that helps!

Cheers!

| Reply |

Skylar weaverryan 5 years ago

Perfect, That is the same conclusion that I came up with.

Thank you for everything!

| Reply |

Tt S. 6 years ago

Hi Team, will there be any VueJS related courses in the future?

| Reply |

Victor SFCASTS Tt S. 6 years ago

Hey Chen,

Yes, we do have VueJS on our TODO list, but unfortunately we don't have any certain plans when it might be released, most probably next year when we'll release new JS courses so this one would be the 1st in the queue I think :)

Meanwhile, your vote for this course is counted. Thank you for your patience!

Cheers!

| Reply |

Vinny 6 years ago

Can you tell me (approx) when the ReactJS (with Symfony) course will be completely done ?

| Reply |

Allan R. Vinny 6 years ago

Hey Vinny,

I can, but approximately :) We're trying to release a video every day, but we do not release videos on weekends. And it's about 25 videos are left until the end. So, this course should be completely released in 5-6 weeks, but once again, it's approximately. Thanks for your patience!

Cheers!

| Reply |

Ad F. 6 years ago

any news ?

| Reply |

Victor SFCASTS Ad F. 6 years ago edited

Hey Ad F.

Actually yes! Check it out! https://twitter.com/KnpUniv...

Cheers!

| Reply |

Greg 6 years ago

Hi guys, any chance you will cover using React Native for mobile app development with a Symfony endpoint?

| Reply |

weaverryan SFCASTS Greg 6 years ago edited

Yo Greg!

Hmm, I don't think we'll talk about React Native... but if there's some specific question/problem that you're wondering about related to the Symfony endpoint/API and how it would communicate with React Native (e.g. authentication) ... that might be interesting. Let us know!

Cheers!

| Reply |

JuanLuisGarciaBorrego 6 years ago

Hi Ryan!!
When is this course available?
Thanks!!!

| Reply |

Victor SFCASTS JuanLuisGarciaBorrego 6 years ago

Hey Juan,

We don't have a release date yet, but this course will be released *after* the one about Webpack. We're working on EasyAdminBundle and Ansistrano tutorials right now, so the next should be a few JS tuts, but anyway Webpack course will be first.

Cheers!

| Reply |

Symfony Reacter 6 years ago

Are we there yet?

| Reply |

Victor SFCASTS Symfony Reacter 6 years ago

Hey Symfony Reacter,

We're almost there :) Right now we're finishing ES6 tutorial and then we plan to start working on ReactJS stuff. You can press "Notify me when course is available" button and stay tuned with us ;)

Cheers!

| Reply |

Kebabra Abdessamad 6 years ago

still waiting ;) https://media.giphy.com/med...

| Reply |

weaverryan SFCASTS Kebabra Abdessamad 6 years ago

Ha! It'll be a bit longer, sorry :). We have Ansible, PHP7 and webpack tutorials coming first! But, I *really* am excited to get to this one...

| Reply |

Romolo Asromo 6 years ago

I really hope this course comes out soon!
http://gph.is/1MNovMC

| Reply |

Victor SFCASTS Romolo Asromo 6 years ago

Hey Romolo,

It will come out after "JavaScript for PHP Geeks: Webpack for Module Loading Awesomeness", but before we're about to release EasyAdminBundle course. We also have a roadmap of upcoming screencasts in case you're interested in it: https://knpuniversity.com/c...

Cheers!

| Reply |

Lucas Vilela 6 years ago

Hey Guys ! Looking forward for this course.. almost every month I come here to check if is available !!
Let's do it !!

Thanks

| Reply |

weaverryan SFCASTS Lucas Vilela 6 years ago

Thanks for your patience - sorry this one has been slow O:)

| Reply |

Huy Nguyen1 6 years ago

i want this so bad

| Reply |

Victor Boutte' 6 years ago

whats the status of this course? When will it be available?

| Reply |

weaverryan SFCASTS Victor Boutte' 6 years ago

Hi Victor!

We'll start work on the Webpack tutorial very soon, then this will be after. Unfortunately, this tutorial may still be a couple months away. But, I'm going to do my best!

Cheers!

| Reply |

Konrad 6 years ago

Looking forward to this course!

| Reply |

Knayz 6 years ago

What about flux or redux?

| Reply |

weaverryan SFCASTS Knayz 6 years ago

:) I'm definitely interested in this. React first... then we'll see what interesting things we can do from there

| Reply |

Chris 6 years ago

Please rush it, I want to see this course, so badly.
I hope you will treat in some detail the authentication part, which I'm curious in. Will you store the JWT in localStorage or in a cookie, as I think that you will use JWT for authentication?

| Reply |

unicolored 6 years ago

Ok let's go! (pleeeaaaseee)

| Reply |

MolloKhan SFCASTS unicolored 6 years ago

Soonish! :)

| Reply |

Burak Demir 6 years ago

When will it be published? I'm looking forward to.

| Reply |

Victor SFCASTS Burak Demir 6 years ago

Hey Burak,

We start releasing Webpack course this week. Actually, the first release will be today :) Then we'll start working on this one about ReactJS. We can't start with it until Webpack course is released, because most probably we will need Webpack features in that course. So you can track Webpack release to see the progress.

Cheers and thanks for your patience!

1 | Reply |

Load more comments