Text
Text
class SearchBar extends React.Component {
render() {
return (
<form>
<input type="text" placeholder="Search..." />
<p>
<input type="checkbox" />
{' '}
Only show products in stock
</p>
</form>
);
}
}
class SearchBar extends React.Component {
render() {
}
}
class FilterableProductTable extends React.Component {
render() {
return (
<div>
<SearchBar />
<ProductTable products={this.props.products} />
</div>
);
}
}
class HelloState extends React.Component {
constructor() {
this.state = {
count: 0
};
}
render() {
return (
<div>
Count: {this.state.count}
</div>
);
}
}
class HelloState extends React.Component {
constructor() {
this.state = {
count: 0
};
}
increment() {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<div>
Count: {this.state.count}
<button onClick={this.increment}>Add 1</button>
</div>
);
}
}
// index.html
<script>
function increment() {
let element = $('#count');
let current = element.text();
element.text(parseInt(current) + 1);
}
</script>
<div>
Count: <label id="count">0</label>
<button onclick="increment()">Add 1</button>
</div>
<todo-item title="Buy milk" color={this.state.defaultColor}>
Flux
React Native
Server Side Rendering