Daniela Matos de Carvalho
Software Engineer @Dashlane, mother, photographer amateur, former @requirelx organiser, prev @YLDio, @zpx_interactive
HTML Attributes
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>
);
}
};
HTML Attrs
class className
class BirthdayInfo extends React.Component {
render() {
return (
<div className="birthdayInfo">
<p>We are going to have a party!</p>
</div>
);
}
};
How can I use styles?
(without className's)
How can I use styles?
inline styles
<!-- 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
<!-- 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;
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>
// variables.scss
$orange: #e1985b;
$blue: #3d8be3;
$green: #67e328;
Using variables
SCSS
Inline styles - Example 3
// variables.scss
$orange: #e1985b;
$blue: #3d8be3;
$green: #67e328;
// 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
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/
set of tools to manage inline styles on React elements
React way
Components are the boundaries of separations of concerns
React escapes content by default
React escapes content by default,
but you can still do unsafe operations if you want...
<p dangerouslySetInnerHTML={{__html: this.props.data}}></p>
Example using dangerous HTML
function dangerousHTML() { return {__html: 'My dangerous html'}; };
<div dangerouslySetInnerHTML={dangerousHTML()} />
Not recommended version
<div dangerouslySetInnerHTML={{__html: getDangerousHTML()}} />
HTML Entities
<div>First · Second</div>
<div>First · Second</div>
class Middot extends React.Component {
constructor(props){
super(props);
this.state = {
content: 'First · Second'
}
}
render() {
return (<div>{this.state.content}</div>);
}
}
HTML Entities
HTML Entities
possible solution
<div>{'First · Second'}</div>
// Bad: It displays "First · Second"
HTML Entities
<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
<div>{['First ', <span>·</span>, ' Second']}</div>
possible solution using mixed arrays with strings and JSX
<div dangerouslySetInnerHTML=
{{__html: 'First · Second'}} />
possible solution using raw HTML
Challenge
1. Exercise
#11-html-attrs
By Daniela Matos de Carvalho
Software Engineer @Dashlane, mother, photographer amateur, former @requirelx organiser, prev @YLDio, @zpx_interactive