https://facebook.github.io/react/docs/introducing-jsx.html
Object
- JSX represents object
- The following declarations are the same because Babel compiles JSX down to React.createElement() calls[js]const element = (
Hello, world!
);[/js]
[js]
const element = React.createElement(
‘h1’,
{className: ‘greeting’},
‘Hello, world!’
);
[/js]
Create element
Specify attribute
- JS and Rect[js]
var element = document.getElementById(‘abcd’);
var elementReact = ReactDOM.findDOMNode(element);
elementReact.setAttribute(‘type’, ‘hidden’);
[/js] - or jQuery and React[js]var elements = $(‘input[id^=”prefix”][id$=”sufix”]’);
elements .each( function(index) {
var elementReact = ReactDOM.findDOMNode(this);
elementReact.setAttribute(‘type’, ‘hidden’);
});[/js] - JSX only[js]const element = <div tabIndex=”0″></div>;[/js]
- JSX & JS[js]const element = <img src={user.avatarUrl}></img>;[/js]
Specify children
How to use Javascript in JSX
- Put Javascript code inside the braces
- Example
[js]
class Square extends React.Component {
render() {
return (
<button className=”square” onClick={() => alert(‘click’)}>;
{this.props.value}
</button>
);
}
}[/js]
If onClick={alert(‘click’)} is set, immediately alert instead of when button is clicked
Leave a Reply