Josh’s page, Class Project. Emerging Web Tech FVCC
joshuarlewis@fvcc.edu
All react code has to be formatted like this:
<!DOCTYPE html>
<html lang=”en”>
<title>Test React</title>
<!– Load React API –>
<script src= “https://unpkg.com/react@16/umd/react.production.min.js”></script>
<!– Load React DOM–>
<script src= “https://unpkg.com/react-dom@16/umd/react-dom.production.min.js”></script>
<!– Load Babel Compiler –>
<script src=”https://unpkg.com/babel-standalone@6.15.0/babel.min.js”></script>
<body>
<script type=”text/babel”>
// JSX Babel code goes here
</script>
</body>
</html>
Here are a couple ideas I had to improve the Blockchain voting project:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ”};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {this.setState({value: event.target.value});}
handleSubmit(event) {
alert(‘A name was submitted: ‘ + this.state.value);
event.preventDefault();
}
render() {
return (
<formonSubmit={this.handleSubmit}>
<label>
Name:
<inputtype=“text“ value={this.state.value} onChange={this.handleChange} /> </label>
<inputtype=“submit“ value=“Submit“ />
</form>
);
}
}
There is also a cool way of adding text areas in React like this:
<textarea>
Hello there, this is some text in a text area
</textarea>
Hello there, this is some text in a text area
</textarea>
Also we can use a select element to make an awesome dropdown menu like this:
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ‘coconut’};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert(‘Your favorite flavor is: ‘ + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value=”grapefruit”>Grapefruit</option>
<option value=”lime”>Lime</option>
<option value=”coconut”>Coconut</option>
<option value=”mango”>Mango</option>
</select>
</label>
<input type=”submit” value=”Submit” />
</form>
);
}
}
ReactDOM.render(
<FlavorForm />,
document.getElementById(‘root’)
);
Anyway, just some ideas. I’ll keep them coming!