The World of React + ESLint

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Hey friends! And welcome! Oh, I am so excited to talk about React. Developing in React feels great, and it's powerful! You can build any crazy frontend you want. But, honestly, writing this tutorial was a huge pain. Technically speaking, React is not hard. But, to even get started, you need to be comfortable with ES6 features and you need a build system, like Webpack Encore. That's why we covered both of those topics in previous tutorials.

But even then! The best practices around React are basically non-existent, especially for a backend developer, who instead of building a single page app, may just want to use React to power part of their frontend.

So our goal in this tutorial is clear: to master React, but also learn repeatable patterns you can follow to write high-quality code while getting your wonderful new app finished, and out the door. We won't hide anything: we'll attack the ugliest stuff and, as always, build something real.

Excited? Me too! And, a huge thanks to my co-author on this tutorial Frank de Jonge, who helped me navigate many of these important topics.

Project Setup

If you'd like free high-fives from Frank... or if you want to get the most out of this tutorial, you should totally code along with me. Download the course code from this page. When you unzip it, you'll find a start/ directory inside that holds the same code that you see here. Open up the file for winning lottery numbers and instructions on how to get the project setup.

The last steps will be to open a terminal, move into the project, and run:

php bin/console server:run

to start the built-in web server. Our project already uses Webpack Encore to compile its CSS and JS files. If you're new to Webpack or Encore, go watch our tutorial on that first.

To build those assets, pour some coffee, open a second terminal tab, and run:

yarn install

to download our Node dependencies. And... once that finishes:

yarn run encore dev --watch

That will build our assets, and rebuild when we change files.

Ok cool! Let's go check out the app: find your browser, go to http://localhost:8000 and say hello to the Lift Stuff App! Login with user ron_furgandy password pumpup.

In our effort to stay in shape... while sitting down and coding all day... we've built Lift Stuff: an app where we can record all the stuff we've lifted throughout the day. For example, before I started recording, I lifted my big fat cat 10 times... so let's totally log that!

In the previous tutorials, we built this JavaScript frontend using plain JavaScript and jQuery. In this tutorial, we'll re-build it with React.

Installing ESLint

But before we dive into React, I want to install another library that will make life much more interesting. Move back to your terminal, open a third terminal tab - we're getting greedy - and run:

yarn add eslint --dev

ESLint is a library that can detect coding standard violations in your JavaScript. We have similar tools in PHP, like PHP-CS-Fixer. To configure exactly which coding standard rules we want to follow, back in our editor, create a new file at the root of the project: .eslintrc.js.

I'll paste in some basic configuration here: you can copy this from the code block on this page. We won't talk about ESLint in detail, but this basically imports the ESLint recommended settings with a couple of tweaks. This jsx part is something we'll see very soon in React.

20 lines .eslintrc.js
module.exports = {
extends: ['eslint:recommended'],
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
ecmaFeatures: {
jsx: true
env: {
browser: true,
es6: true,
node: true
rules: {
"no-console": 0,
"no-unused-vars": 0

Thanks to this, we can now run a utility to check our code:

./node_modules/.bin/eslint assets

where assets/ is the directory that holds our existing JavaScript code. And... aw, boring! It looks like all of our code already follows the rules.

This utility is nice... but there's a more important reason we installed it. In PhpStorm, open the settings and search for eslint to find an ESLint section. Click to Enable this and hit Ok. Yep, PhpStorm will now instantly tell us when we've written code that violates our rules.

Check this out: open assets/js/rep_log.js: this is the file that runs our existing LiftStuff frontend. Here, add const foo = true then if (foo), but leave the body of the if statement empty. See that little red error? That comes from ESLint.

This may not seem very important, but it's going to be super helpful with React.

Adding a new Entry

As I mentioned, our app is already built in normal JavaScript. Instead of deleting our old code immediately, let's leave it here and build our React version right next to it. In the same directory as rep_log.js, which holds the old code, create a new file: rep_log_react.js. Log a top-secret, important message inside so that we can see if it's working. Don't forget the Emoji!

console.log('Oh hallo React peeps! ?️');

Now, open webpack.config.js: we're going to configure this as a new "entry". Typically, you have one entry file per page, and that file holds all of the JavaScript you need for that page. Use addEntry('rep_log_react') pointing to that file: ./assets/js/rep_log_react.js.

... lines 1 - 3
... lines 5 - 12
.addEntry('rep_log_react', './assets/js/rep_log_react.js')
... lines 14 - 28
... lines 30 - 33

To build this, go back to your terminal, find the tab that is running Webpack Encore, press Ctrl+C to stop it, and run it again: you need to restart Webpack whenever you change its config file.

Finally, to add the new JavaScript file to our page, open templates/lift/index.html.twig, find the javascripts block, and add the script tag for rep_log_react.js. You don't normally want two entry files on the same page like this. But when we finish, I plan to delete the old rep_log.js file.

And just like that, we can find our browser, open the dev tools, go to the console, refresh and... Hello World!

Now, it's time to go say Hello to React!

Leave a comment!

  • 2020-06-22 weaverryan

    Hey Asick Ahamed!

    Hmm. Are you using npm instead of yarn? In that case, try running npx run encore dev --watch?

    That should be the equivalent command. For both yarn and npm (with npx), this is just a shorcut for executing a binary that's located at ./node_modules/.bin/encore.

    Let me know if that helps!


  • 2020-06-22 Marlon Alejandro Espinosa Cast

    THANKS!!!! it work perfectly with the upgrade of node-sass!! all is good now!! thanks a lot!! Cheers!!

  • 2020-06-22 Asick Ahamed

    I have installed npm but i can not run npm in CMD.
    I have got below error

    npm ERR! missing script: encore

    npm ERR! A complete log of this run can be found in:

  • 2020-06-16 weaverryan

    Hey Marlon Alejandro Espinosa Cast!

    Hmm. Can you see exactly which part of it failed? One thing that fails for me frequently is the node-sass "build step", which is different on every operating system. It's a bit of a tricky thing - if your dependencies get even a little bit out-of-date, then suddenly that can fail on "yarn install". I've got a feeling that this is related to your problem... and we might need to bump our dependencies to help with this.

    Try this to work around for now:

    yarn upgrade node-sass

    And if that doesn't work, go big with:

    yarn upgrade

    I be that will solve your problem. But let me know - we'll check into updating the dependencies in the download.

    Cheers and sorry about the issue!

  • 2020-06-16 Marlon Alejandro Espinosa Cast

    ah no problem... not worry about it :)... is v12.16.1 Cheers!!

  • 2020-06-16 Vladimir Sadicov

    bah.. my bad I forgot to ask about nodejs version, sometimes latest versions of nodejs can throw errors.

    Cheers and sorry for my bad attention to details :)

  • 2020-06-15 Marlon Alejandro Espinosa Cast

    Hi thanks for answer I'm using v1.22.4. Cheers!

  • 2020-06-15 Vladimir Sadicov

    Hey Marlon Alejandro Espinosa Cast

    What yarn version did you use?


  • 2020-06-14 Marlon Alejandro Espinosa Cast

    Hi I just downloaded the code from this champter (fresh new project) and then run composer install in the START directory, and all was fine, but when I ran the comand yarn install, I got like 84 differents errors and 104 warnings ... any advice?? I'm using VSC text editor, on Windows 10... the final error just said that:
    `C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools\MSBuild\15.0\Bin\MSBuild.exe` failed with exit code: 1 :(...Regards and thanks in advance!!

  • 2019-10-16 Diego Aguiar

    Hey sheepwall

    I don't see any errors in your logs. So nothing is failing. I'm assuming that you are getting the "Invalid credentials" message, if that's the case I believe you forgot to run the fixtures php bin/console doctrine:fixtures:load
    Please do that and try again


  • 2019-10-16 sheepwall

    Hey I can't seem to log in to the webapp from the start code.

    In var/log/dev.log after trying to log in with run_furgandy, pumpup (also tried other usernames)

    Link to gist of logfile

    So there are a bunch of info and debug level messages and deprecated notices.
    EDIT: moved logfile to github gist!

  • 2019-08-15 weaverryan

    Hey Tobias Ingold!

    It's on our list... but no timeline yet for it... which means it won't be the next few tutorials. Personally, having studied both Vue and React quite a bit at this point, while they're very similar to each other (in the way that PHP frameworks all more or less do the same thing) I found Vue easier to get into and more forgiving. So, if you're looking to try something, try Vue. And... we'll do our best to get a tutorial out sometime ;).


  • 2019-08-14 Tobias Ingold

    Are you guys also planning on doing a course on Vue.js since some newer courses like Messenger or API Platform Security have their frontend built on it? I would love to build a single page app but it seems so hard to really build something good with react since it would require react router, redux and more complex stuff that's difficult to learn and find best practices, and in general it's not entirely clear to me how things should be done with react :(

  • 2019-06-17 Vladimir Sadicov

    Hey Skylar Scotlynn Gutman

    Simple answer, this function wasn't available when this course was created =) So it uses more oldschool file including!


  • 2019-06-16 Skylar Scotlynn Gutman

    Hello Guys,

    I was wondering why we don't use {{ encore_entry_script_tags('app') }} to insert the js files?

  • 2019-05-17 Vladimir Sadicov

    hey Skylar Scotlynn Gutman

    Feel free to use symfony-cli server instead of build-in server =) And your issue probably caused by symfony-cli server which you run for the first time. Browser saved http to https redirect, but built-in server cannot serve ssl connection. To run built-in server try to start it at another port probably 8080 it should run than.


  • 2019-05-17 Skylar Scotlynn Gutman

    Hey guys,
    In this tutorial, it says to use the built-in server, by executing php bin/console server:run and goto
    I get this error:
    Warning: SessionHandler::read(): open(/var/lib/php/sessions/sess_ee1fkh12mm054l54aip03ecpg3, O_RDWR) failed: Permission denied (13)

    and in the console:
    [Fri May 17 09:08:27 2019] Invalid request (Unsupported SSL request)

    but if I use the new symfony serve and use the secure link https: I have no problems.

  • 2019-03-12 Дмитрий Ченгаев

    Thank you, Ryan. I understood. You really helped me. The project is still at the design stage. I will check in practice.

  • 2019-03-11 weaverryan

    Hey Дмитрий Ченгаев!

    > Idea with async code splitting is a really great. I will use it.


    > What about a webpack in a development environment? It needs to follow the changes in a huge number of JavaScript files.

    Nothing should be different in the dev environment - if you refresh, Webpack will AJAX-download the updated script tag and your page will have the updates. Are you having performance problems with --watch because your app is so huge?


  • 2019-03-11 Дмитрий Ченгаев

    Thanks Ryan. Yes, each game is playable on a different URL. 

    Idea with async code splitting is a really great. I will use it. 

What about a webpack in a development environment? It needs to follow the changes in a huge number of JavaScript files.

    Is it possible to somehow make it follow and work only the script that is currently in development.

    Maybe I need to comment entry points that are not currently used?

  • 2019-03-10 weaverryan

    Hey Дмитрий Ченгаев !

    Can you tell me about more about the games? Are you developing many different games in React, and each is playable on a different URL? If so, yea, you totally could create a different entry point for each one - that's 100% logic. But, I agree, it could be messy.

    With the little I know, here's what I would do:

    A) Create a single entry point that is able to "boot" a game
    B) By parsing the URL (or using a Route, which is cleaner), determine which "game" the user wants to play.
    C) Use a dynamic / AJAX import to "import" React component for the game that is being requested and render it. This page isn't for React, but this shows the async import I'm talking about:

    This would allow you to have a big list of all the games inside your main entrypoint file. Then, via a router, if statement, or something similar, you determine which import() code to execute. Webpack will then import that component, and you'll render it.

    I hope this helps!


  • 2019-03-08 Дмитрий Ченгаев


    I have a project with interactive React JS games.

    Tell me how to better organize the structure of such project? Create multiple entry points to Webpack for each game? Each game has its own script. There can be hundreds of such entry points. It's not very good.

    It may be possible to generate the script in production for a separate game, save the source code in a safe place and proceed to the development of the next script from the same entry point.

    I am completely confused. Help me please.

  • 2019-01-22 weaverryan


    Yea, this is a bug with PHP 7.3 and our version of the dependencies. We're going to upgrade the dependencies soon to avoid this. You can also do this on your own by running composer update doctrine/orm - the bug was fixed in doctrine/orm 2.6.3.

    Sorry about that! New versions of PHP bring in new little bugs sometimes :).


  • 2019-01-22 mouerr

    me too

  • 2019-01-13 Žilvinas Navickas

    Hello, I have a problem at first step of readme. When i run composer install in the project I get:

    Script cache:clear returned with error code 1
    !! In UnitOfWork.php line 2718:
    !! Warning: "continue" targeting switch is equivalent to "break". Did you mean
    !! to use "continue 2"?
    Script @auto-scripts was called via post-install-cmd

  • 2018-10-01 Shaun

    Thanks for the clarification weaverryan :)

  • 2018-09-17 weaverryan

    Hey Shaun!

    You can ignore these :). This is a little incompatibility with how npm packages work and how Webpack Encore works. In Encore, we require webpack as a dependency so that YOU don't have to. But, this means that you get these above warnings. They're not actually a problem, as these libraries will just use the Webpack provided by Encore internally, but they are annoying, and confusing. We may change Encore in the future to require *you* to install Webpack to avoid these - I'm not sure - something I think about :).


  • 2018-09-17 Shaun

    I have added ESLint, but I get the following warning:

    [3/4] 🔗 Linking dependencies...
    warning " > babel-loader@7.1.5" has unmet peer dependency "webpack@2 || 3 || 4".
    warning " > sass-loader@6.0.7" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".

    But I already have Webpack installed?

  • 2018-09-07 Mark Railton

    No worries weaverryan, this course is looking like exactly what I was looking for. Gonna start in on it properly once other things settle a little.

  • 2018-09-06 weaverryan

    Hey Mark Railton!

    Ah, thanks for the ping on that! I'll update that right now - we had the same issue on our Symfony series :).


  • 2018-09-06 Mark Railton

    Heads up for people starting the course, seems that the version of flex used is out of date, was getting an error when trying to run composer install in the start dir - Declaration of Symfony\Flex\ParallelDownloader::getRemoteContents($originUrl, $fileUrl, $context) should be compatible with Composer\Util\RemoteFilesystem::getRemoteContents($originUrl, $fileUrl, $context, ?array &$responseHeaders = NULL) - seems you need to run composer update to get the dependencies to install

  • 2018-08-27 Victor Bocharsky

    Hey James,

    In simple words, why React over jQuery: The more you need to change after some events, like after you sent an AJAX request and got a response with some data that you need to update on the page - the more you need to look into React JS direction :)

    But if you want an example, try to finish this ReactJS course, I bet you will understand better ReactJS in the end of this tutorial and it will be more obvious for you when ReactJS is better than jQuery.


  • 2018-08-24 James Davison

    Thanks Ryan for this AWESOME answer, I can't seem to really understand why exactly we would need to use React? Have you got some example where you believe you would absolutely use React over just simple javascript like jQuery?

    Thanks again for your time!

  • 2018-08-24 weaverryan

    Hey James Davison!

    That's a very interesting application! :). There are 2 parts to this answer:

    1) React? Maybe! It's not that complex of an app from a JavaScript standpoint. Though, you may not be telling me all the details. The more complex the number of interactions, the more React makes sense. So, it's sort of up to you. For a simple app like this, it will take you *longer* in React, because you'll need to learn React as you go versus using tools you already know (e.g. jQuery). But if you *want* to learn and aren't on a tight deadline, it's a simple app and so a pretty good candidate for learning.

    2) The *real* unique thing about your app is how you need one user's screen to change when *another* use performs some action. There are 2 ways to solve this. First, the traditional, but ugly way: When a user clicks "New round", you make an AJAX request to the server to set some new database value. Then, all the users from his/her group make "polling" AJAX requests to *check* to see if there is a new round that was created. This solution isn't ideal, because it literally means that every user needs to *constantly* make AJAX requests to ask "Is there a new round?". To make the app feel "responsive" you might need to make these every 5 seconds. Bummer!

    What's the *second* way to solve this? Web sockets! In this setup, when he/she clicks "New round", you would probably *still* send an AJAX request to the server to update some stuff in the database. But then, you would be able to push this notification from the server *directly* to the JavaScript of the users in his/her group so that the know of the new round immediately. The best way to do this in PHP (and I love this service) is with Pusher: They allow you to have this setup with *very* little setup work. We use it here on our coding challenges: when you submit a new challenge, we notify you immediately (via Pusher) when the "grading" is finished.

    I hope this helps!


  • 2018-08-23 James Davison

    Hi Guys,

    I am looking to use Reactjs but I am not sure if it is really the solution to my problem.

    I am looking to create a Tea app.

    When a user wants a tea, here is the "New round process":

    1. He/She clicks on "New round"
    2. All users from his/her group are notified that a new round is on the go
    3. These users see their page to change (without reload), to ask them if they want a cup of tea
    4. These users select YES or NO and press "Yes I want a cup of tea"
    5. After 5 min these users see their page to change (even if they selected NO) to display who wants a cup of tea and who has been chosen to make it

    Do you think Reactjs is the right way to go?

  • 2018-06-21 Dan Meigs

    I'm using 2018.1.

  • 2018-06-20 Diego Aguiar

    Interesting... what PHPStorm version are you using?

  • 2018-06-20 Dan Meigs

    Hey guys!

    Glad to get started on this tutorial. When I installed eslint and enabled the plugin, PHPStorm complained that I didn't have eslint-plugin-react. I had to add that with yarn to get the PHPStorm plugin to work.


  • 2018-06-19 weaverryan

    Hey Lopoi Popoi!

    Great question! We didn't mean to be so mysterious :). We have an entire JavaScript track:

    We built this application in the first 4 tutorials of this track. The really important ones are:

    1) JavaScript for PHP Geeks:
    2) ES6
    3) Webpack Encore:

    If you're new to ES6 or Webpack, you will NOT regret going through these tutorials :).


  • 2018-06-19 Lopoi Popoi

    Hi KNP team!

    What is the base (plain JS?) tutorial you are refer to in this React one as a base?