Last active
February 15, 2018 15:49
-
-
Save jbardon/79e346a0a6417230fd2dc4ac02659c86 to your computer and use it in GitHub Desktop.
## Intro to React and Virtual DOM (https://medium.com/keepitlazy/intro-to-react-and-virtual-dom-f2bd1eda2feb)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Skipping all HTML5 boilerplate --> | |
<script src="https://unpkg.com/react@16.2.0/umd/react.development.js"></script> | |
<script src="https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js"></script> | |
<!-- For JSX support (with babel) --> | |
<script src="https://unpkg.com/babel-standalone@6.24.2/babel.min.js" charset="utf-8"></script> | |
<div id="app"></div> <!-- React mounting point--> | |
<script type="text/babel"> | |
class Watch extends React.Component { | |
render() { | |
return <div>{this.props.hours}:{this.props.minutes}</div>; | |
} | |
} | |
ReactDOM.render(<Watch hours="9" minutes="15"/>, document.getElementById('app')); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// React.createElement naive implementation (using ES6 features) | |
function createElement(type, props, ...children) { | |
return { type, props, children }; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const Watch = (props) => | |
<div>{props.hours}:{props.minutes}</div>; | |
ReactDOM.render(<Watch hours="Hello" minutes="World"/>, document.getElementById('app')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Using JS with React.createElement | |
React.createElement('form', null, | |
React.createElement('div', {'className': 'form-group'}, | |
React.createElement('label', {'htmlFor': 'email'}, 'Email address'), | |
React.createElement('input', {'type': 'email', 'id': 'email', 'className': 'form-control'}), | |
), | |
React.createElement('button', {'type': 'submit', 'className': 'btn btn-primary'}, 'Submit') | |
) | |
// Using JSX | |
<form> | |
<div className="form-group"> | |
<label htmlFor="email">Email address</label> | |
<input type="email" id="email" className="form-control"/> | |
</div> | |
<button type="submit" className="btn btn-primary">Submit</button> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Equivalent to JSX: <Watch hours="9" minutes="15"/> | |
React.createElement(Watch, {'hours': '9', 'minutes': '15'}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"type":"div", | |
"props":{ "className":"form-group" }, | |
"children":[ | |
{ | |
"type":"label", | |
"props":{ "htmlFor":"email" }, | |
"children":[ "Email address"] | |
}, | |
{ | |
"type":"input", | |
"props":{ "type":"email", "id":"email", "className":"form-control"}, | |
"children":[] | |
} | |
] | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment