Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine

React with Symfony

5:00:38

What you'll be learning

This course uses Symfony 4, but as this is a JavaScript course, all the concepts apply fine to Symfony 5. Have fun!
// composer.json
{
    "require": {
        "php": "^7.2.0",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "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
        "sensio/framework-extra-bundle": "^5.1", // v5.2.0
        "symfony/asset": "^4.0", // v4.1.4
        "symfony/console": "^4.0", // v4.1.4
        "symfony/flex": "^1.0", // v1.17.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/serializer-pack": "^1.0", // v1.0.1
        "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": {
        "symfony/debug-pack": "^1.0", // v1.0.6
        "symfony/dotenv": "^4.0", // v4.1.4
        "symfony/maker-bundle": "^1.5", // v1.5.0
        "symfony/phpunit-bridge": "^4.0", // v4.1.4
        "symfony/web-server-bundle": "^4.0" // v4.1.4
    }
}
// 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}
)

Your Guides

Frank de Jonge Ryan Weaver

Buy Access
Login or register to track your progress!

Join the Conversation?

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

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

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

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

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

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
Maciej J. Avatar
Maciej J. Avatar Maciej J. | posted 4 months 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

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

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

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

Reply
Allan R. Avatar

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

any news ?

Reply
victor Avatar victor | SFCASTS | Ad F. | posted 4 years ago | edited

Hey Ad F.

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

Cheers!

Reply
Default user avatar

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

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
Default user avatar Symfony Reacter | posted 4 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
Default user avatar Kebabra Abdessamad | posted 4 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
Default user avatar Romolo Asromo | posted 4 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
Default user avatar Lucas Vilela | posted 4 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
Default user avatar Huy Nguyen1 | posted 4 years ago

i want this so bad

Reply
Default user avatar
Default user avatar Victor Boutte' | posted 4 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

Looking forward to this course!

Reply
Default user avatar

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

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
Default user avatar
Default user avatar Burak Demir | posted 4 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
Default user avatar

It's for when this course ?

Reply
Cat in space

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