Styling in React

programming
1

For generations, mankind (and probably really smart dolphins) have styled their HTML content using CSS. Things were good. With CSS, you had a good separation between the content and the presentation. The selector syntax gave you a lot of flexibility in choosing which elements to style and which ones to skip. You couldn't even find too many issues to hate the whole cascading thing that CSS is all about.

This is a companion discussion topic for the original entry at http://www.kirupa.com/react/styling_in_react.htm
2

Great tutorial and I loved the book! Running thru the chapters using your website version now. FYI: I noticed a warning gets kicked out on the console when fontSize: “32” is applied. The recommendation seems to be to use fontSize: 32 without quotes instead.

3

Glad you liked the article and the book! I’ll update the tutorial shortly, and I’ve marked this as something to address in the next version of the book. I’m sure that in a few releases (~few months given how fast they make improvements :P) that this will turn from a warning into an error haha.

4

No problem! I know things change at the speed to light in this industry. I fully expect things to be deprecated. At least you’re providing a decent foundation/starting point. You’ve written one of the better tech books I’ve read and I’ve read a lot of them. Thanks again! I’ll be writing a good Amazon review soon.

1 Like
5

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.


1 Like
6

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. :slight_smile:

2 Likes
7

Melissa!!! Long time no see :slight_smile:

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.

8

I don’t have anything to add other than:

Hey lunatic!!!

9

Ha, whaddup kril? Long time no see. :slight_smile:

Thanks K, the tutorials are great!

1 Like
10

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 ??

11

That shouldn’t really happen, but then again - code is strange :stuck_out_tongue: Can you post a snippet of your code? We’ll take a look!

12 
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 .

13

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?

14

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;
1 Like
15

Glad it worked, but the variable being inside the render function is totally OK as well :slight_smile:

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.

16

Hi Kirupa ,

I think i have put my words in a wrong way :neutral_face: , 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 .

17

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.

1 Like
18

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

19

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 :slight_smile:

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!

20

Sir, you are a web development God sent from the heavens. Thank you for helping us mortals. Keep up the great work!

1 Like