const Thanks = () => (
<div>
<div className="well">
<h2>Thanks!</h2>
<p>Any feedback?</p>
<FeedbackLinks />
<p>
<a className="btn btn-default"
href="http://jscomplete.com"
target="_blank">
Learn more about jsComplete
</a>
</p>
</div>
<div className="text-center">
<div style={{maxWidth: 400, display: 'inline-block'}}>
<SubscribeForm source="feedback" />
<ShareLinks />
</div>
</div>
</div>
);
class SubscribeForm extends React.Component {
state = { flashMessage: '' };
handleSubmit = (event) => {
event.preventDefault();
subscribeEmail(this.emailInput.value, this.props.source).then((resp) => {
this.emailInput.value = '';
this.setState({ flashMessage: resp.data.message });
}).catch((err) => {
this.setState({ flashMessage: err.toString() });
});
};
render() {
return (
<form style={{maxWidth: 400}}
onSubmit={this.handleSubmit}>
<h4>Get access to our interactive labs</h4>
<div className="input-group">
<input type="email" className="form-control" required
placeholder="Your Email Address"
ref={input => this.emailInput = input} />
<span className="input-group-btn">
<button className="btn btn-info" type="submit">Join</button>
</span>
</div>
<div className="help-block">{this.state.flashMessage}</div>
</form>
);
}
}
ReactDOM.render(<Thanks />, mountNode);
https://jscomplete.com/javascript-function-scopes-block-scopes
https://facebook.github.io/react/docs/dom-elements.html#style
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
class Hello extends React.Component {
style() {
return {
color: 'brown',
fontSize: 16
};
};
render() {
return (
<div style={this.style()}>
Hello React
</div>
);
}
}
ReactDOM.render(<Hello />, mountNode);
https://jscomplete.com/learning-react-js
1.2 -The live editor
https://gist.github.com/xgqfrms-gildata/0080e188a6921504717220fdae5eddb9
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const names = ["Sara","Cahal", "Edite"];
function App() {
return (
<div>
{names.map((name)=>{
return <Welcome name={name} />;
})}
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
class Parent extends React.Component {
constructor(props) {
super(props)
this.handler = this.handler.bind(this)
}
handler(e) {
e.preventDefault()
this.setState({
someVar: someValue
})
}
render() {
return <Child handler = {this.handler} />
}
}
class Child extends React.Component {
render() {
return <Button onClick = {this.props.handler}/ >
}
}import { Dispatcher } from flux
import { Component } from React
const dispatcher = new Dispatcher()
// Component 3
// Some methods, such as constructor, omitted for brevity
class StatefulParent extends Component {
state = {
text: 'foo'
}
componentDidMount() {
dispatcher.register( dispatch => {
if ( dispatch.type === 'change' ) {
this.setState({ text: 'bar' })
}
}
}
render() {
return <h1>{ this.state.text }</h1>
}
}
// Click handler
const onClick = event => {
dispatcher.dispatch({
type: 'change'
})
}
// Component 5 in your example
const StatelessChild = props => {
return <button onClick={ onClick }>Click me</button>
}
If you meant to render
a collection of children, use anarrayinstead or wrap the object using createFragment(object) from the React add-ons.
https://jscomplete.com/16.02-call-stack/1.0.m4a