Morning:
Afternoon:
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