Loved the tutorial Kirupa. Got me thinking too so I was Inspired to create a Sublime Text 3 Plugin after finishing the tutorial to help everybody style css in camelCase that is acceptable to React. I really hope this can help everyone avoid the tediousness of converting regular CSS to react acceptable css by hand.
Greetings!
One thing is a bit confusing - you go from
var Letter = React.createClass({
render: function() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: “#ffde00”,
color: “#333”,
display: “inline-block”,
fontFamily: “monospace”,
fontSize: 32,
textAlign: “center”
};
to
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: “#ffde00”,
color: “#333”,
display: “inline-block”,
fontFamily: “monospace”,
fontSize: 32,
textAlign: “center”
};
From createClass to React.Component is a bit confusing for new users. 
Melissa!!! Long time no see
Thanks for pointing that out. That’s a bug I need to fix. I was going through and revamping everything to use the class syntax (since React 16 is deprecating createClass), and I missed some of them.
I don’t have anything to add other than:
Hey lunatic!!!
Ha, whaddup kril? Long time no see.
Thanks K, the tutorials are great!
Hi kirupa ,
I am new to react and have a doubt here , while just tried exploring , if i define the object letterstyle outside of my render function and try to use it in the return i am getting the unexpected token error . why is that ??
That shouldn’t really happen, but then again - code is strange 
Can you post a snippet of your code? We’ll take a look!
import React , { Component } from 'react';
class Test extends Component {
render(){
var myStyle={
backgroundColor:"red",
width:"100px",
height:"100px",
margin:"0 auto",
marginTop:"50px"
};
return(
<div style={myStyle}>
</div>
);
}
}
export default Test;
this code throws me the unexpected token error , as i am defining the myStyle object outside the render function , i thought the scope of this object will be for the entire component .The Same works correctly when it is used within the function .
I just tested your code as-is on my machine, and your code works just fine! Is there a specific line the unexpected token error is happening on?
my bad , the variable mystyle has to be outside of the render function . This is the correct code .
import React , { Component } from 'react';
class Test extends Component {
var myStyle={
backgroundColor:"red",
width:"100px",
height:"100px",
margin:"0 auto",
marginTop:"50px"
};
render(){
return(
<div style={myStyle}>
</div>
);
}
}
export default Test;Glad it worked, but the variable being inside the render function is totally OK as well
If you are still curious as to what the issue is, feel free to revert back to the error prone state and attach the JS files here.
Hi Kirupa ,
I think i have put my words in a wrong way 
, the above code is the one ( with the myStyle object being declared outside the render function ) that gives me the unexpected token error . You can test that code in your machine .
You can’t have var declarations in the class body like that. They need to be in a class method (such as render) or outside of the class altogether.
Mr. Kirupa,
Thanks for another great tutorial. My question is about why the Letter component is defined in 2 different ways.
In the first example, you use class Letter extends React.Component, in the next example, you use var Letter = React.createClass{()}, and last example back to the Letter extends React Component. Is there a reason for that?
Thanks
Sorry about that. That is a bug. I thought I had fixed when @lunatic brought it up, but I seem to have forgotten to publish the changes. It should be fixed now
For more context, in earlier versions of React, you could create components either by using the class syntax or by using React.createClass(). The latter approach has been deprecated in React 16, but I had only used the createClass approach because I liked how you could do mix-ins (extend the functionality of your component more easily) with it. Since this approach is deprecated, I went through and revised all of the code examples. I missed a few such as this one!
Sir, you are a web development God sent from the heavens. Thank you for helping us mortals. Keep up the great work!
can you try to show us the pure function state this topic was only thought in class function
None of the examples in this tutorial use component state, so its just a matter of making render your pure function and changing this.props to props where props is the first parameter of the function.
For example:
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: "#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return(
<div style={letterStyle}>
{this.props.children}
</div>
);
}
}
would be
function Letter (props) {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: "#ffde00",
color: "#333",
display: "inline-block",
fontFamily: "monospace",
fontSize: 32,
textAlign: "center"
};
return(
<div style={letterStyle}>
{props.children}
</div>
);
}
There is a problem in the code
class Letter extends React.Component {
render() {
var letterStyle = {
padding: 10,
margin: 10,
backgroundColor: “#FFDE00”,
color: “#333”,
display: “inline-block”,
fontFamily: “monospace”,
fontSize: 32,
textAlign: “center”
};
return (
<div>
{this.props.children}
</div>
);
}
}
It is missing this
<div style={letterStyle}> in the book
Unfortunately, that is a mistake that slipped through. You can see this and other errors called out here: https://www.kirupa.com/react/errata.htm
Cheers,
Kirupa 
:: Copyright KIRUPA 2024 //--