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.

Time to install React! Find your open terminal: yarn add react - and we also need a second package called react-dom:

yarn add react react-dom --dev

react is... um... React. react-dom is the library we'll use to render our React app onto the page, the DOM. These are separate libraries because you can actually use React to render things in a non-browser environment.

Anyways, when that finishes, go back to rep_log_react.js. Like with all libraries, to use React, we need to require or import it. I'll use the newer, far more hipster import syntax in this tutorial to import React from react.

Elements & the Virtual DOM

Here's the idea behind React: it's actually really beautiful: we create React element objects that represent HTML elements, like an h1 tag. These don't actually live on the page, they're just objects that describe HTML elements.

But then, we can tell React to look at our element objects, and use them to create real HTML elements on the page, or, on the DOM. This means that we will have a tree of element objects in React and a tree of element objects on the page. To say it a different way, we will have a virtual DOM in React and the real DOM on the page.

And... that's it! Of course, the magic is that, when we change some data on a React element object, React will update the corresponding DOM element automatically.

Creating React Elements

So... let's create some React elements! To really master this, yea... we're going to do things the hard way first. But, it will be totally worth it.

Create a new const el set to React.createElement(). Make this an h2 tag: we're building the title on top of the app. Pass null for the second argument: but this is where you could pass an array of any HTML attributes for the element. These are called "props" in React - but more on that later. For the third argument, pass whatever you want to put inside, like text: "Lift History!".

import React from 'react';
const el = React.createElement('h2', null, 'Lift History!');
... lines 4 - 5

Cool! Let's console.log(el): I want you to see that this is just a simple object. Go refresh the page. The element is not, yet, being rendered to the screen in any way. It's just a React element that describes a potential HTML element.

... lines 1 - 3

Rendering React to the DOM

Now, go back to index.html.twig. To render the element onto the page, we need a target. The existing app is rendered in this js-rep-log-table element. Above this, add a new <div class="row"> and inside, an empty div we can render into with id="", how about, lift-stuff-app. Then, for a bit more separation, add a bunch of line breaks and an <hr>.

... lines 1 - 2
{% block body %}
<div class="row">
<div id="lift-stuff-app"></div>
<hr />
... lines 11 - 55
{% endblock %}
... lines 57 - 70

Awesome! Copy the id of the div. To render React to the DOM, we need to use that other package we installed: import ReactDom from react-dom. Then, just, ReactDom.render() to render our el into document.getElementById('lift-stuff-app').

... line 1
import ReactDom from 'react-dom';
... lines 3 - 5
ReactDom.render(el, document.getElementById('lift-stuff-app'));

That's it! Step 1: create a React element object and, step 2, use ReactDom and some boring, raw JavaScript to render it onto the page.

Let's go try it! Move over and refresh! Ha! We have our very first, but I, know very simple, React app. We deserve balloons!

Nested Elements

Of course, in a real app, we're going to have more than just one element. Heck, we're going to have a big nested tree of elements inside of other elements, just like we do in normal HTML.

So... how could we put an element inside of our h2? First, break things onto multiple lines to keep our sanity. The answer is... by adding more and more arguments to the end of React.createElement(). Each argument - starting with the third argument - becomes a new child that lives inside the h2. For example, to create a nested span element, use React.createElement() with span, null and a heart Emoji.

... lines 1 - 3
const el = React.createElement(
'Lift History! ',
React.createElement('span', null, '❤️')
... lines 12 - 13

Let's log el again. Then, flip over and... refresh!

Ha! There it is! Inspect the element: yep, the h2 tag with a span inside. Check out the logged Element: it now has two "children", which is a React term: the text and another React element object.

Awesome! But... you've probably already noticed a problem. Building a real app with many nested elements is going to get really ugly... really quickly. This React "element" idea is great in theory.... but in practice, it's a nightmare! We need another tool to save us. That tool is love. I mean, JSX.

Leave a comment!

  • 2019-05-20 Diego Aguiar

    Hmm, have you tried asking it on PHPStorm site comments? I think PHPStorm autocomplete JS based on libraries you have installed but I'm not sure how you can adapt it to your needs

  • 2019-05-17 Skylar Scotlynn Gutman

    Diego Aguiar Thank for the reply, but it was already set to "React JSX"

  • 2019-05-17 Diego Aguiar

    Hey Skylar Scotlynn Gutman

    Try changing your JS language version to "React JSX" inside settings -> Languages & Frameworks -> Jasvascript


  • 2019-05-17 Skylar Scotlynn Gutman

    Hello guys,

    In my phpstorm, the parameter hint box show many lines as opposed to the single line shown in the video. Do you know why, what is it displaying and how to use it?

    Here is a screen snip:

    Thank you for the work you do and all these wonderful tutorials.

  • 2018-09-20 Diego Aguiar

    Hey Matt O'Toole

    > You could, of course, just do this manually by simply editing your package.json directly?

    You're totally correct, you can just do it manually and everything will work fine

  • 2018-09-20 Matt O'Toole

    Thanks very much. I kind of figured that might have been the case. That makes sense. It's all beginning to click!! 🙂Presumably, if you do use yarn add {package_name} without the --dev flag accidentally and just yarn remove {package_name} and then add it back in with the --dev (yarn add {package_name} --dev), all this is doing is juggling the package's key/value pair in your package.json file deleting the required directories in ./node-modules and then adding them back. You could, of course, just do this manually by simply editing your package.json directly?

  • 2018-09-12 weaverryan

    Hey Matt O'Toole!

    Great question! This is a confusing detail... that's actually not important at all. In fact, react and react-dom will NOT be used on production. Well, to be more accurate, we do not need the node_modules/react and node_modules/react-dom directories to be available on production. That's because, during deploy, we will have used Webpack to pack them into some final JavaScript files. Ultimately, on production, we don't even need node installed, or any of the packages to be installed.

    Of course, if you're like me, 100% of your Node packages are being used in this way. But, in theory, someone could build an app where they have a combination of things like react & react-dom that are "processed" by Webpack AND a few other node libraries that truly *are* being used at runtime, in the production server. So, that's why I like to keep the react, webpack, etc stuff in require-dev :).


  • 2018-09-12 Matt O'Toole

    Why would use --dev when adding react and react-dom? Surely they'll both be needed in production?

  • 2018-07-24 Diego Aguiar

    That's great! Thanks for sharing it :)

  • 2018-07-24 Skylar Scotlynn Gutman

    Well, I found an answer so let me share. Microsoft has added a dedicated Emoji Panel or Picker to Windows 10 v 1709. Press Windows Key + Period (.) or Windows Key + semicolon (;) to bring up Emoji Panel. https://www.thewindowsclub....

  • 2018-07-23 weaverryan

    Hey Skylar Scotlynn Gutman!

    Ha! I see you are paying attention to the important details ;). Actually, this is an OSX shortcut - not from PhpStorm. It's control+command+spacebar on OSX to bring up that menu anywhere. I... kinda use it all the time.


  • 2018-07-22 Skylar Scotlynn Gutman

    How did you get to choose from a popup selection of emojis in Phpstorm ?

  • 2018-06-19 weaverryan

    Hey Amine Tzouk!

    We'll release a new video every day - so very soon! :)

  • 2018-06-19 Amine Tzouk

    I hope we will have the next tutorials soon.

    best regards.