React Hooks Tutorial — Create a Number Trivia Generator Website

Image for post
Image for post
npm i -g create-react-app
create-react-app numbers-trivia
cd numbers-trivia
npm start
Image for post
Image for post
import React, { Component } from 'react' 
import logo from './logo.svg'
import './App.css'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1>Hello, World!</h1>
</header>
</div>
)
}
}
export default App
import React from 'react'; 
import ReactDOM from 'react-dom';
import '../styles/index.css';
import App from './components/App';
import as serviceWorker from './serviceWorker';
import React, { Component } from 'react'; 
import logo from './logo.svg';
import '../styles/App.css';
Image for post
Image for post
useEffect(() => {
//perform something post render
});
useEffect(() => document.title = `You have clicked ${counter} times`, [counter]);
import React, {useEffect} from 'react'; 
import Form from './Form';
import '../styles/App.css';

function App() {
useEffect(() => {
setTimeout(() => {
let welcomeMessage = document.getElementById("welcomeMessage");
welcomeMessage.innerHTML = "Try Out Our Trivia Generator!";
}, 3000);
}, []);

return (
<div className="App">
<header className="App-header">
<h1 id="welcomeMessage">Welcome to Numbers Trivia!</h1>
<Form />
</header>
</div>
); }
export default App;
import React from 'react';  function Form(props){
}
export default Form;
function Form(props){
return (<form>
<div>
<input type="text" name="number" placeholder="Enter a number (Optional)" />
</div>
<div>
<select name="type">
<option value="trivia">Trivia</option>
<option value="math">Math</option>
<option value="date">Date</option>
<option value="year">Year</option>
</select>
</div>
<button type="submit">Generate</button>
</form>);
}
import React, {useEffect} from 'react';
import Form from './Form';
import '../styles/App.css';
function App() {
useEffect(() => {
setTimeout(() => {
let welcomeMessage = document.getElementById("welcomeMessage");
welcomeMessage.innerHTML = "Try Out Our Trivia Generator!";
}, 3000);
}, []);
return (
<div className="App">
<header className="App-header">
<h1 id="welcomeMessage">Welcome to Numbers Trivia!</h1>
<Form />
</header>
</div>
);
}
export default App;
form {
font-size: 15px;
}
form input, form select {
padding: 5px;
}
form select {
width: 100%;
}
form div {
margin-bottom: 8px;
}
const [count, setCount] = useState(0);
import React, { useState } from 'react';function Form(props){  let [number, setNumber] = useState("random");  let [type, setType] = useState("trivia");  function onNumberChanged(e){    let value = e.target.value.trim();    if(!value.length){      setNumber("random"); //default value    } else {      setNumber(value);    }  }  function onTypeChanged(e){    let value = e.target.value.trim();    if(!value.length){      setType("trivia"); //default value    } else {      setType(value);    }  }  return (<form>            <div>              <input type="text" name="number" placeholder="Enter a number (Optional)" value={number} onChange={onNumberChanged} />            </div>            <div>              <select name="type" value={type} onChange={onTypeChanged}>                <option value="trivia">Trivia</option>                <option value="math">Math</option>                <option value="date">Date</option>                <option value="year">Year</option>              </select>            </div>            <button type="submit">Generate</button></form>);}export default Form;
import React, {useEffect, useState} from 'react'; 
import Form from './Form';
import '../styles/App.css';

function App() {
const [ welcomeMessage, setWelcomeMessage ] = useState(
"Welcome to Numbers Trivia!",
);
useEffect(() => {
setTimeout(() => {
setWelcomeMessage("Try Out Our Trivia Generator!");
}, 3000);
}, []);
return (
<div className="App">
<header className="App-header">
<h1>{welcomeMessage}</h1>
</header>
<Form/>
</div>
);
}
export default App;
npm i axios
const axios = require('axios');
function onSubmit(e){  e.preventDefault();
axios.get('http://numbersapi.com/' + number + '/' + type)
.then(function(response){ let elm = document.getElementById('result'); elm.innerHTML = response.data; }).catch(function(e){ console.log("error", e); //simple error handling });
}
<form onSubmit={onSubmit}>
<div id="result" style={{marginBottom: '15px'}}></div>

Conclusion

Written by

Full stack developer. http://shahednasser.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store