React CSS
Inline Styling
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id = "root"></div>
	<script src="https://fb.me/react-0.14.3.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.js"></script>
	<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
	<script src="script.js" type = "text/babel"></script>
</body>
</html>
  • the style value must be a JavaScript object
  • CSS is written in a JavaScript object, properties with two names, like background-color, must be written with camel case syntax, backgroundColor
  • delimit properties with "," instead of ";"
    • //script.js
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {num: 0}
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
	  this.setState({num: this.state.num+1})
  }

  render() {
    return (
	    <div>
	    	<li style = {{backgroundColor: "red", color: "blue"}} onClick={this.handleChange}>{this.state.num}</li>
	    </div>
    );
  }
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
)
    JavaScript Object
    //script.js
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {num: 0}
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
	  this.setState({num: this.state.num+1})
  }

  render() {
    const liStyle = {backgroundColir: "red",
	    color: "blue"};
    return (
	    <div>
	    	<li style = {liStyle} onClick={this.handleChange}>{this.state.num}</li>
	    </div>
    );
  }
}

ReactDOM.render(
	<App />,
	document.getElementById('root')
)
    JavaScript Object
  • write style with css style
  • name the css module to by myName.module.css
    • //mystyle.module.css
body {
	background-color: #282c34;
	text-align: center;
}

.listyle {
	background-color: red;
	color: blue;
	font-size: 20pt;
}
		
    //index.js
import React from 'react';
import ReactDOM from 'react-dom';
import styles from "./mystyle.module.css"

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {num: 0}
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
	  this.setState({num: this.state.num+1})
  }

  render() {
    return (
	    <div className = {styles.listyle}>
	    	<li onClick={this.handleChange}>{this.state.num}</li>
	    </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));