React JS Tutorials for Beginners - 3 - Components

The reason you needed to refresh twice at 4:10 is because WebStorm saves the code after losing focus, so it lost focus after you clicked the first time on Chrome and saved the code, then it was saved and on the refresh we could see updated title size.

[Nukturn]

instead this
var Bacoon = React.createClass({
render: function () {
return(<h3>this is a simple component</h3>);
}
});

you can use this now:
var Bacoon = class extends React.Component{
render () {
return (<h3>this is a simple component</h3>);
}
};

[abhayamin]

*UPDATE*
If you get the error createClass is not a function.

That is because the latest React version does not include createClass.

Instead you can create a component using this similar code.

class Bacon extends React.Component {
render() {
return (
<h3>This is a simple compotnent</h3>
);
}
}

[Yakushii]

I tried naming the class "bacon" instead of "Bacon" and it didn't work. I tested some more, and it seems that class variables have to have their first letter capitalized?

[SouravTechLabs]

There are 2 types of guys:
1. var Bacon = ... ;
other codes ...

2. var Bacon = ...
other codes ...

1.
other codes... ;
(() => { return 'something' }).call()

2.
other codes...
; (() => { return 'something' }).call()

[Gabzes]

Man I'm watching the hell outta this series! Thanks dude :P

[wotanxiaozuo]

Most clearly explained React tutorial I've listened to! Thx!

[kimharoldpinanonang]

please make updated tutorial for react. I came a long way with all your tutorials bucky from html, css, javascript, to php. now i want to learn react . u helped me with my journey a lot

[amsfuy]

Awesome series! Really look forward to what I'm going to learn.

[dragerot]

An update:
React.createClass is now

class Bacon extends React.Component{


render(){
return(<h2>This is a simple</h2>);
}
};

[passionpeace]

It still kind of amazes me how much more you can do with jquery with less code. What's the true performance benefit ? it seems to me that if jquery just had a jquery-router that you'd be able to put together apps way faster than react. But hey.. I'm not gonna lie, react has me super excited and I'm going to continue to learn it and go on to learn other implementations like react-native. Thanks for showing me the way!

[akcrono]

Doesn't work. "React.createClass is not a function"

[prakashdangol]

Can we not use class instead of Id? I tried using class and rendering it like I used to do in javascript but didn't work. I've just started learning react.js.
Help me.
Thanks

[PianoDad]

Racking my brain here. I have copied the code here character by character and still I get this error showing up in the developer tools in Chrome:

Uncaught ReferenceError: ReactDom is not defined
at eval (eval at transform.run (browser.min.js:4), <anonymous>:16:1)
at Function.transform.run (browser.min.js:4)
at exec (browser.min.js:4)
at runScripts (browser.min.js:4)

What am I doing wrong?

[AakashShahFromGoogle]

How do you use it on a local server? My webstorm port gives me 404. Please tell me the deployment configuration.

[hirenrana]

react var name's first alphabet must be UPPER case.

[scrapcoin]

I get an error: *React.createClass({}); is not a function*, which I cannot seem to debug...

[Strum_And_Hum]

According to 2019: The modified code is:
class Bacon extends React.Component{
render(){
return (<h3>This is heading 3 </h3>);
}
}

[KMoses]

Thanks for a great tutorial!
Could anyone explain how to setup idea to auto complete the react stuff like here in the video?

[AliBaba-vwmo]

What language did you use to make your website?