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).

React with Symfony

  • 4263 students
  • EN Captions
  • EN Script
  • Certificate of Completion

Your Guides

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
Login or Register to join the conversation
Default user avatar Jeremy Jumeau 5 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 |
Default user avatar Vince Liem 5 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 |

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 |

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

1 | Reply |

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 |
Default user avatar Christopher Jackson 5 years ago

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

3 | Reply |
Default user avatar Christophe Lablancherie 5 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 |

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 |
Default user avatar Jon Kamke Victor 5 years ago

How soon is soon : (

1 | Reply |

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 |
Default user avatar Andrew 5 years ago

Are we there yet? :(

1 | Reply |

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 |

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

| Reply |

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 avatar Maciej-J 1 year 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 |

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 avatar 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 |

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 |

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 |

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 |

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

Thank you for everything!

| Reply |
Tt S. avatar Tt S. 5 years ago

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

| Reply |

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 |
Default user avatar Vinny 5 years ago

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

| Reply |

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. avatar Ad F. 5 years ago

any news ?

| Reply |

Hey Ad F.

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

Cheers!

| Reply |

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

| Reply |

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 avatar JuanLuisGarciaBorrego 5 years ago

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

| Reply |

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 |
Default user avatar Symfony Reacter 5 years ago

Are we there yet?

| Reply |

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 |
Default user avatar Kebabra Abdessamad 5 years ago
| Reply |

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 |
Default user avatar Romolo Asromo 5 years ago

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

| Reply |

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 |
Default user avatar Lucas Vilela 5 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 |

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

| Reply |
Default user avatar Huy Nguyen1 5 years ago

i want this so bad

| Reply |
Default user avatar Victor Boutte' 5 years ago

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

| Reply |

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 |
Default user avatar Konrad 5 years ago

Looking forward to this course!

| Reply |
Default user avatar Knayz 5 years ago

What about flux or redux?

| Reply |

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

| Reply |
Default user avatar Chris 5 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 |

Ok let's go! (pleeeaaaseee)

| Reply |

Soonish! :)

| Reply |
Default user avatar Burak Demir 5 years ago

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

| Reply |

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 |

Delete comment?

Share this comment

astronaut with balloons in space

"Houston: no signs of life"
Start the conversation!