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

11.

Child Component

|

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

12 Comments

Sort By

Login or Register to join the conversation

Ibrahim E. 4 years ago

Hello, why we call RepLogList Com is a child of RepLogApp? in OOP Concept, if class B is a child of class A, we must first define the relationship (using 'extends' key word for example), because class B can recognise its parent class and inherits properties and functions from the base class. However, in OOP, class A can use class B by declaring an object from class B inside it but we call this Class A 'USE or has-a relationship' class B. So here why we do not say RepLogApp Com uses or has-a RepLogList Com? instead of saying RepLogList is a child of RepLogApp Com?

|

MolloKhan SFCASTS Ibrahim E. 4 years ago edited

Hey Ibrahim E.

That's a good observation and the thing here is in the React world everything renders from top to bottom, in this case, inside the RepLogApp component we render RepLogList components, so it's valid to say that RepLogList is a child of RepLogApp but this does not have anything to do with any OOP principles (Actually, JavaScript it's not a real OO language).

Cheers!

|

Abhimanyu 7 years ago

I'm getting the following warning.

#1 RepLogList.js:20 Uncaught TypeError: _this2.handleRowClick is not a function
at onClick (RepLogList.js:20)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
at executeDispatch (react-dom.development.js:561)
at executeDispatchesInOrder (react-dom.development.js:583)
at executeDispatchesAndRelease (react-dom.development.js:680)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
at forEachAccumulated (react-dom.development.js:662)

#2 react-dom.development.js:210 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossor... for more information.
at Object.invokeGuardedCallbackDev (react-dom.development.js:210)
at invokeGuardedCallback (react-dom.development.js:256)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
at executeDispatch (react-dom.development.js:561)
at executeDispatchesInOrder (react-dom.development.js:583)
at executeDispatchesAndRelease (react-dom.development.js:680)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:688)
at forEachAccumulated (react-dom.development.js:662)
at runEventsInBatch (react-dom.development.js:816)
at runExtractedEventsInBatch (react-dom.development.js:824)

|

Skylar Abhimanyu 7 years ago

Hey guys,

I am having the same problem. I don't mind ignoring errors, but the row is not highlighting. I checked to make sure I am using the arrow function as stated in the comments here, but still not able to get it to work.

|

Skylar Skylar 7 years ago

Doh! Nevermind. I just realized that when you were testing to see if the code worked, you did not click it. Instead you changed the value in the React tab of Chrome Inspector. As I plunged ahead anyway, you mention that the click handler is broken and needs to be fixed. So I will keep on, keep'n on...

|

MolloKhan SFCASTS Skylar 7 years ago edited

Hey Skylar

Do you get the same exact error? double check this variable

Cheers!

|

weaverryan SFCASTS Abhimanyu 7 years ago edited

Hey Abhimanyu!

Hmm, let's see! So, the error (based on the "handleRowClick() is not a function" and because it says it's on line 20 of RepLogList.js) is likely this line:


onClick={(event) => this.handleRowClick(repLog.id, event)}

From this code block: https://symfonycasts.com/screencast/reactjs/child-component#codeblock-57285e7743

Notice the error is complaining about "_this2", not "this". That is likely just because of how Webpack / Babel is rewriting the code - so "_this2" almost definitely is referring to "this". So, the question is: why is there handleRowClick() not a function? My guess is that: that you're not using an "arrow" function on this line. Notice the => in the code above - do you have that? If you do NOT - if you have a normal function(), then the "this" variable is being changed. That's actually why we use arrow functions. We talk a lot about them here: https://symfonycasts.com/screencast/javascript-es6/arrow-functions#the-arrow-functions-secret-superpower-this

Let me know if that's the issue!

|

apphancer weaverryan 7 years ago edited

weaverryan

weaverryan OK - I just had to play the first minute of the next chapter to realise that this is totally expected :)

|

MolloKhan SFCASTS apphancer 7 years ago

Excellent, so everything is working as expected, right?

|

apphancer MolloKhan 7 years ago

Yes - I mean, the error is actually there. One could get alarmed by the fact that there is an error as it's not mentioned in the video. Luckily it's first thing addressed in the subsequent chapter.

|

MolloKhan SFCASTS apphancer 7 years ago

You are totally right, it could be alarming. I'm gonna add a note about it :)

Cheers!

|

apphancer weaverryan 7 years ago edited

weaverryan same problem here for me. I've double checked line 20 and confirm that is using an arrow function as follows:

onClick={(event) => this.handleRowClick(repLog.id, event)}

|

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