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

40.

Passing Server Data to React Props

|

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

13 Comments

Sort By

Login or Register to join the conversation

Mouad E. 7 years ago

Hello, please fix RepLogController ====> newRepLogAction it not returning the correct response content:

//$response = $this->createApiResponse($apiModel);
this line must be uncommented

|

Mouad E. Mouad E. 7 years ago

sorry it's my mistake

|

Victor SFCASTS Mouad E. 7 years ago

Hey Mouerr,

No problem! Sometimes we may miss something, so thank you for keeping your eyes on it ;)

Cheers!

1 |

Victor SFCASTS Mouad E. 7 years ago

Hey Mouerr,

Thank you for reporting this! Though I downloaded the course code and in both start/ and finish/ directories that line is uncommented. Could you give me more context? Where exactly you see that line commented out?

Cheers!

|

bartek 7 years ago

How to handle displaying images/translations? Generate it in twig and pass as props?

|

Victor SFCASTS bartek 7 years ago edited

Hey bartek ,

Images are just HTML tags, so you need to pass a proper path to the image, to generate a proper path you need to use asset() Twig function. Then, just receive it and put into src attribute of img tag.

Translations - good question. You can take a look at https://github.com/willdura... - it will give you a Translator object in JS with similar to Symfony Translator Component's API. Use it to translate messages on site. Or, as an alternative solution, if you don't want to use this bundle, you will need to pass already translated text, for it use trans() or transchoice() Twig functions.

Cheers!

|

bartek Victor 7 years ago edited

Hey victor

Thanks for reply!
images are loaded through require and translations are provided as ready to use props but I'll try to use this bundle!
Thank you very much for your advice!
Have a nice day ;)

16 |

bartek Victor 7 years ago

Hi again! ;) Do you know how to set up BazingaJsTranslationBundle to work with webpack encore correctly? I don't want to use it globally but through import statement

3 |

Victor SFCASTS bartek 7 years ago edited

Hey bartek ,

IIRC, you can install it via NPM (or Yarn) and import it in your JS files: https://github.com/willdura...

Did you try this?

Cheers!

|

bartek Victor 7 years ago edited

Sorry for late reply victor ;)

yes, know it works fine but installed it by composer and yarn.

I use webpack and import Translator works but to deliver translations to Translator i used dump method but not loaded by xhr like it was written in doc but I wanted to get the same way as in jsrouting-bundle so I did it like that

const locale = document.querySelector('.js-request').dataset.locale;
import Translator from 'bazinga-translator';
const myRetrievedJSONString = require(`../../../public/js/translations/messages/${locale}.json`);
Translator.fromJSON(myRetrievedJSONString);

if you think that this solution is wrong please tell me ;)
thnkas for your time!

|

Victor SFCASTS bartek 7 years ago edited

Hey bartek ,

Ah, ok, sounds reasonable. Though if I understand you right - I'd recommend you to use "dump" command in production to dump all the translations you needed to a static file, see: https://github.com/willdura... . And then just include/use that file directly in production instead of "{{ url('bazinga_jstranslation_js', { '_format': 'json' }) }}" or custom "Translator.fromJSON(myRetrievedJSONString);". And every time you add/update translations - you would need to re-dump them again. But in development, probably not a big deal to use the recommended "{{ url('bazinga_jstranslation_js', { '_format': 'json' }) }}".

Cheers!

|

Narong Pattanayanon 7 years ago

window.REP_LOG_APP_PROPS is undefined!
itemOptions: Array(0)

|

MolloKhan SFCASTS Narong Pattanayanon 7 years ago edited

Hey Narong Pattanayanon

You have to declare the window.REP_LOG_APP_PROPS object in your template

Cheers!

|

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