JavaScript for PHP Geeks: ReactJS (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": "*",
        "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.6.2
        "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
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.19.0", // 0.19.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
        "babel-preset-react": "^6.24.1", // 6.24.1
        "bootstrap": "3", // 3.3.7
        "copy-webpack-plugin": "^4.4.1", // 4.5.1
        "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
        "node-sass": "^4.7.2", // 4.9.0
        "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-loader": "^6.0.6", // 6.0.7
        "sweetalert2": "^7.11.0", // 7.22.0
        "uuid": "^3.2.1", // 3.2.1
        "webpack-notifier": "^1.5.1", // 1.6.0
        "whatwg-fetch": "^2.0.4" // 0.9.9
    }
}

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!

Questions? Conversation?