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 > React with Symfony

Buy Access to Course

38.

...Object Rest Spread

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

10 Comments

Sort By

Login or Register to join the conversation

xmontero 3 years ago edited

I'm rather new to javascript advanced features and compiling transpiled language thru babel... so, maybe my question seems a bit silly to all you.

Thing is...

I found that object spread "seems" to work for my setup with no plugins. In fact, I can see that Object Spread seems to be super-common since the last years according to mozilla developer docs:

Section "Spread in object literals": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals

There's a table below (section "Browser compatibility") and it seems to be compatible nearly at any browser or server with node with v8.3.0 or above.

My node version is v18 so it seems natural I have the object spread there:

ubuntu@devel-sf6:/files/repos$ node --version
v18.9.1

Okey... Now what?

ES Lint complains. You say to set "version to 2018" in ES configuration in the video card.

But for curiosity I went to google and searched [eslint ecma version 2018] and I found this: https://eslint.org/docs/latest/user-guide/configuring/language-options

And it seems that more than 6 and 2018 there are myriads of ecma versions.

# I have 2 questions here:

a) How do I ask my system "hey, what ECMA standard are you?"
b) Where exactly do I configure that in the .eslintrc.js

About question "a" I wonder if I should set 2018, or any of the newer, 2019, 2020, 2021 or even 2022 as stated in the eslint page.

On the other hand, the reason by which I ask for question "b" is that in .eslintrc.jc I see both

parserOptions: {
    ecmaVersion: 6,
    [...]

As welll as

env: {
    es6: true,
    [...]

which for me is redundant as they both indicate "ecma 6" and I don't really know what config option controls what in ES Lint.

# In short

I seems it's working out of the box in my webpack.
Still my linter needs to be taught about this, but there are infinite versions and 2 places where to set it and I'm lost.

So... What exact syntax should I use in ES Lint config file and what exact ECMA version should I set?

|

weaverryan SFCASTS xmontero 3 years ago

Hey @xmontero!

No worries - this stuff can be confusing. I focus a LOT on ES6, as MOST modern language features come from that version. But, in truth, they release a new version pretty much every year - the naming is now done by the year. So, the object spread came from ECMAScript 2018, for example. When I first made this tutorial, that was super new stuff. Now it's OLD news and is supported everywhere. That's why things are working out-of-the-box for you.

Still my linter needs to be taught about this, but there are infinite versions and 2 places where to set it and I'm lost.

Yea, this is confusing. In short, it seems best to set both of these Well, actually, only one is needed. Let... me break this into 2 parts:

A) What version to set these to? If you're using a transpiler like Babel, then you might as well use all of the latest and greatest language features - as these will be rewritten to older JavaScript as needed for the browsers you want to support. But even browsers are quite good these days at supporting most modern JS. Anyways, I'd set env.es2022: true - source https://eslint.org/docs/latest/user-guide/configuring/language-options#specifying-environments - again, the reason being that you might as well use the latest stuff.

B) Setting env.es2022 will automatically set parserOptions.ecmaVersion to 2022. So in reality, you're setting both (though you should only need to set env.es2022. Why do both need to be set internally? What's the difference? parserOptions.ecmaVersion is about syntax: if es2022 introduced some new syntax (e.g. like let and const in es6/es2015), then this tells eslint to support that. env.es2022 is about what global variables you have access to. So, if es2022 introduced some new object (e.g. like Promise in es6/es2015), then this would tell eslint to support that.

Let me know if this helps clear things up - eslint is fun to have once it's set up :).

Cheers!

|

CDesign 5 years ago edited

I had a terrible time getting the object rest spread plugin to work. Apparently the new versions of this library requires Babel 7, so you need to upgrade webpack-encore itself.

This is how I did that:

1) yarn remove babel-preset-react

2) In package.json, change the version of webpack-encore to "^0.21.0" and then run yarn install

3) yarn add @babel/preset-react --dev

4) And finally: yarn add @babel/plugin-proposal-object-rest-spread --dev

Now yarn watch should compile without errors.

When you get to the step about updating Babel configuration, be sure to use this:

babelConfig.plugins.push('@babel/plugin-proposal-object-rest-spread');

And as mention by others, you no longer have to change anything in eslintrc.js.

If you want to know more about the changes in Encore 0.21.0, see Ryan's blog post here:

https://symfony.com/blog/encore-0-21-0-webpack-4-support-copy-files-support-webpackencorebundle

Hope this helps someone else!

|

weaverryan SFCASTS CDesign 5 years ago edited

Hey John christensen!

Ah! I'm really sorry about the trouble! But thanks so much for the awesome details! I'm going to also take a look into this (using your notes) to see what note we could add to the tutorial to help others.

Anyways, I really appreciate your comment - it's a tough challenge for us (and we're always trying to improve to find things before users) to add notes to keep tutorials working as new versions of things come out :).

Cheers!

|

Carlos G. 6 years ago

ESLint version 6 don't work with "experimentalObjectRestSpread: true,".

Fix:
{
"parserOptions": {
"ecmaVersion": 2018
}
}

https://eslint.org/docs/user-guide/migrating-to-6.0.0#the-deprecated-experimentalobjectrestspread-option-has-been-remo

|

weaverryan SFCASTS Carlos G. 6 years ago edited

Thanks Carlos G.!

We'll get a not added for people using newer versions of eslint! The new way is easier anyways ;)

Cheers!

1 |

Ryan S. 6 years ago

trying to follow but ran into issues. ended up installing newer: yarn add @babel/plugin-proposal-object-rest-spread --dev
but this required @babel/core so yarn add @babel/core --dev
and then yarn add @babel/preset-react --dev

then removed the old version: yarn remove babel-preset-react

but now i get: Error: Install babel-preset-react to use enableReactPreset()

How can I tell webpack encore to use the newer version of preset-react?

EDIT: I was able to back everything out and get it working. Just caution to those that might try to install the @babel/plugin instead of the one you use.

|

Victor SFCASTS Ryan S. 6 years ago

Hey Stinndler,

Thank you for sharing some tips with others! I suppose when you installed a new version of babel/preset-react - you actually upgraded this package... so, it means that when you later removed this - it removed not the "old version" of it, it removed it completely from your dependencies. So, you would need to remove the old version first and install the new one... ot just upgrade the package without removing it.

Anyway, I'm glad you got it working!

Cheers!

|

Alexander P. 7 years ago

This syntax is available by default since v7 of babel/preset-react

|

weaverryan SFCASTS Alexander P. 7 years ago edited

Great news! Thanks for sharing Alexander P.!

|

While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).

Symfony 4 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
    }
}

Previous Chapter

Next Chapter