Morning:
Afternoon:
contenteditable - MDN documentationkeypress eventsclass syntax; it’s still prototypal inheritance though) - ES2015 classes on BabelcontentEditable is a property that, like the name suggests, allows the content of an HTML element to be edited through user interaction with the DOM (similar to a text input field).
<div class="person-name">Mark</div>
<button>Click to Edit Name</button>
const nameDiv = document.querySelector('.person-name')
console.log(nameDiv.isContentEditable) // => false
const button = document.querySelector('button')
button.addEventListener('click', (ev) => {
nameDiv.contentEditable = true
console.log(nameDiv.isContentEditable)
})
button.click() // => true (and div content will be editable)
A basic React application requires a minimum of four things:
A minimal example:
<-- index.html -->
<html>
<head>
<title>Basic React App</title>
<script src="App.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
// App.js
class App extends React.Component {
render() {
return (
<h1>Hello, world!</h1>
)
}
}
ReactDOM.render(<App />, document.querySelector('#app'))
The body of the HTML above contains only an empty div with an id of ‘app’. This is where we will tell React to render our app. The App.js file defines the App component, and also makes the call to ReactDOM.render, which attaches <App /> to the div#app element.
React will ‘fill in’ the div with the return result of the App component’s render method, in this case, the markup <h1>Hello, world!</h1>.
React components can be thought of as JavaScript functions. They take in arguments, called props, and return markup that gets rendered to the page. Props can be just about anything, including strings, booleans, functions, objects, etc…
class App extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}!</h1>
)
}
}
<App name="Bob" />
By passing in the string "Bob" to the App component, we can access that value from within the App class as a property on this.props.
Our rendered output would then be:
<h1>Hello, Bob!</h1>
Components receive props as arguments and cannot change their values. Data that needs to change belongs in state.
State should be initialized in the constructor and updated via setState.
Always use setState to modify a component’s state. The only time you should set state directly is in the constructor.
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
}
increment(ev) {
count = this.state.count + 1
this.setState({ count })
}
render() {
return (
<button type="button" onClick={this.increment.bind(this)}>
Click to Increment
</button>
<p>
Button has been clicked {this.state.count} times
<p>
)
}
}
<App />
With modules, you can define each component in separate files, importing them as needed.
Header.js
class Header extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}!</h1>
)
}
}
export default Header
App.js
import Header from './Header'
class App extends React.Component {
render() {
return (
<Header name="Bob" />
)
}
}
export default App
map and passing in the props they need