eamonnboyle

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

eamonnboyle

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

eamonnboyle

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>

eamonnboyle

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

eamonnboyle

...
function App() {
  return (
    <div>
      <h1>Weather App</h1>
    </div>
  );
}
...

eamonnboyle

...
function App() {
  return (
    <div>
      <h1>Weather App</h1>
      <div>
        <label>
          Add Location <input type="text" value="Paris"/>
        </label>
        <button>Search</button>

eamonnboyle

import React, {useState} from 'react';
// ...
function App() {
  const [locationSearch, setLocationSearch] = useState('Paris');
  // ...

eamonnboyle

<label>
  Add Location <input type="text" value={locationSearch}/>
</label>

eamonnboyle

<input type="text" value={locationSearch}
       onChange={e => setLocationSearch(e.target.value)}/>

eamonnboyle

function App() {
  const [locationSearch, setLocationSearch] = useState('Paris');
  const [locations, setLocations] = useState(['Belfast', 'Dublin']);