React

HTML Attributes

React

HTML Attrs

for                   htmlFor

     class                className

HTML Attrs

     for                htmlFor

    class BirthdayInfo extends React.Component {
      render() {
        return (
          <div>
            <label htmlFor='title'>Title</label>
            <input type='text' id='title' value={this.state.title} 
                onChange={this.changeTitle.bind(this)} placeholder='Title' />
          </div>
          );
      }
    };

React

HTML Attrs

     class                className

    class BirthdayInfo extends React.Component {
      render() {
        return (
          <div className="birthdayInfo">
            <p>We are going to have a party!</p>
          </div>
          );
      }
    };

React

How can I use styles?

(without className's)

React

How can I use styles?

React

inline styles

React

    <!-- Hello world -->
    <div class="awesome" style="border: 1px solid red">
      <label for="name">Enter your name: </label>
      <input type="text" id="name" />
    </div>

HTML

Inline styles - Example 1

HTML to JSX

React

    <!-- Hello world -->
    <div class="awesome" style="border: 1px solid red">
      <label for="name">Enter your name: </label>
      <input type="text" id="name" />
    </div>

HTML

JSX

class NewComponent extends React.Component {
  render() {
    return (
      <div>
        {/* Hello world */}
        <div className="awesome" style={{border: '1px solid red'}}>
          <label htmlFor="name">Enter your name: </label>
          <input type="text" id="name" />
        </div>
      </div>
    );
  }
};

example from https://facebook.github.io/react/html-jsx.html

    // style.js
    
    let style = {
      tableStyle: {
        backgroundColor: '#f5f5f5'
      },
    };
    
   export default style;

React

Inline styles - Example 2

Using CommonJS

    // style.js
    
    let style = {
      tableStyle: {
        backgroundColor: '#f5f5f5'
      },
    };
    
    export default style;

    import style from 'style.js';

    /* .... */

    // some react component
    <table style={style.tableStyle}>
        <thead>
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
           (...)
        </tbody>
    </table>

React

    // variables.scss
    
    $orange: #e1985b;
    $blue: #3d8be3;
    $green: #67e328;

React

Using variables

SCSS

Inline styles - Example 3

    // variables.scss
    
    $orange: #e1985b;
    $blue: #3d8be3;
    $green: #67e328;

React

    // variables.js
    
    export default {
       orange: '#e1985b',
       blue: '#3d8be3',
       green: '#67e328'
    };

SCSS

JS

Using variables

Inline styles - Example 3

Notes about styles

- Styles are not "CSS"

- Everything inside the component

- Styles could be in JavaScript

- Not every CSS rule is mapped

React

Michael Chan - Inline Styles @react-europe
https://www.youtube.com/watch?list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&v=ERB1TJBn32c

Notes about styles

Radium ("CSS in JS")

   http://projects.formidablelabs.com/radium/

React

set of tools to manage inline styles on React elements

React way

React

Components are the boundaries of separations of concerns

React escapes content by default

React

React escapes content by default,

but you can still do unsafe operations if you want...

   <p dangerouslySetInnerHTML={{__html: this.props.data}}></p>

React

dangerouslySetInnerHTML

provides the ability to insert raw HTML

Example using dangerous HTML

    function dangerousHTML() { return {__html: 'My dangerous html'}; };

    <div dangerouslySetInnerHTML={dangerousHTML()} />

React

Not recommended version

    <div dangerouslySetInnerHTML={{__html: getDangerousHTML()}} />

React

HTML Entities

    <div>First · Second</div>

React

<div>First &middot; Second</div>

    class Middot extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          content: 'First · Second'
        }
      }
    
      render() {
        return (<div>{this.state.content}</div>);
      }
    }

React

HTML Entities

HTML Entities

possible solution

React

<div>{'First &middot; Second'}</div>

// Bad: It displays "First &middot; Second" 

HTML Entities

React

<div>{'First · Second'}</div>

possible solution using unicode

<div>{'First \u00b7 Second'}</div>

<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

possible solution using unicode number

View char codes: http://www.fileformat.info/info/unicode/char/b7/index.htm

HTML Entities

React

<div>{['First ', <span>&middot;</span>, ' Second']}</div>

possible solution using mixed arrays with strings and JSX

<div dangerouslySetInnerHTML=

                                   {{__html: 'First &middot; Second'}} />

possible solution using raw HTML

React

Challenge

1. Exercise

      #11-html-attrs