Josh’s page, Class Project. Emerging Web Tech FVCC

[email protected]

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/[email protected]/babel.min.js”></script>

<body>

</body>
</html>

Here are a couple ideas I had to improve the Blockchain voting project:

I was thinking we could use a name/submit button combo something like this React.js. Let me look up some other code ideas to add to the page.

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>`

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!

Josh's React JS

const element =

What are we up to?

;

Josh's Test React

Hello World!