In a previous article, we learned about components and all the awesome things that they do. We learned that components are the primary ways through which React allows our visual elements to behave like little reusable bricks that contain all of the HTML, JavaScript and styling needed to run themselves. Beyond reusability, there is another major advantage components bring to the table. They allow for composability. You can combine components to create more complex components.
The reason has to do with JSX being turned into regular JavaScript without knowing what code will be hit or not. When the Babel transpiler runs, it turns your first version of your code into this:
var Square = React.createClass({
displayName: "Square",
render: function render() {
return React.createElement("div", null);
}
});
When you don’t specify anything to return, you get an error because the render method must call React.createElement. Not having anything there causes an error like Unexpected Token or something equivalent.
And in fact you can work around this by slightly modifying the example (and supporting prose) like this:
var Square = React.createClass({
render: function() {
return;
}
});
As you can see I simply omited the parenthetical marks after the return which was empty context. Tested on both Chrome and electron (Chromium.) After doing this it transpiles and executes a-ok allowing you to check your work as you go rather than ‘all at the end.’
Hello, here is the code in between my script tags that I have and nothing is displaying. I have read and reread the example and explanation in the tutorial, but still can’t get it to work. Is there anything you can see here that would help point me in the right direction? I want to complete the tutorial but can’t get passed this stage. Help!
Hi, there was an error, and I watched the video and worked through it. Thx! But I have into another snag in the “Dealing with State” section. There is another unexpected error in the console. I see the carrot, but don’t understand what exactly is the issue. I have the same exact code in the example. Can you point me in the right direction?
You have to use the class syntax as opposed to React.createClass, starting with React 16. The code in the tutorial should work for you, for it is using the latest syntax! The video isn’t updated yet, but that is something I will try to re-record later this week