return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

import Profile from './Profile.js';

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

export default function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

<div>	{/* 也可以写成 <> */}
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    className="photo"
  >
  <ul>
    ...
  </ul>
</div>  {/* 也可以写成 </> */}

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"  {/* "avatar" 是字符串属性 */}
      src={avatar}        {/* 动态的文本信息，会调用变量 avatar */}
      alt={description}
    />
  );
}

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>  {/* 函数调用 `formatDate()` */}
  );
}

{/* 甚至还可以写成这样： */}
const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

export default function TodoList() {
  return (
    <ul style=>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

import { useState } from 'react';

// 添加两个状态变量 FilterableProductTable并指定应用程序的初始状态
function FilterableProductTable({ products }) {
  const [filterText, setFilterText] = useState('');
  const [inStockOnly, setInStockOnly] = useState(false);

  return (
    <div>
      <SearchBar 
        filterText={filterText} 
        inStockOnly={inStockOnly} 
        onFilterTextChange={setFilterText} 
        onInStockOnlyChange={setInStockOnly} />
      <ProductTable 
        products={products} 
        filterText={filterText}
        inStockOnly={inStockOnly} />
    </div>
  );
}

function ProductCategoryRow({ category }) {
  return (
    <tr>
      <th colSpan="2">
        {category}
      </th>
    </tr>
  );
}

function ProductRow({ product }) {
  const name = product.stocked ? product.name :
    <span style=>
      {product.name}
    </span>;

  return (
    <tr>
      <td>{name}</td>
      <td>{product.price}</td>
    </tr>
  );
}

function ProductTable({ products, filterText, inStockOnly }) {
  const rows = [];
  let lastCategory = null;

  products.forEach((product) => {
    if (product.name.indexOf(filterText) === -1) {
      return;
    }
    if (inStockOnly && !product.stocked) {
      return;
    }
    if (product.category !== lastCategory) {
      rows.push(
        <ProductCategoryRow
          category={product.category}
          key={product.category} />
      );
    }
    rows.push(
      <ProductRow
        product={product}
        key={product.name} />
    );
    lastCategory = product.category;
  });

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
}

function SearchBar({
  filterText,
  inStockOnly,
  onFilterTextChange,
  onInStockOnlyChange
}) {
  return (
    <form>
      <input 
        type="text" 
        value={filterText} placeholder="Search..." 
        onChange={(e) => onFilterTextChange(e.target.value)} />
      <label>
        <input 
          type="checkbox" 
          checked={inStockOnly} 
          onChange={(e) => onInStockOnlyChange(e.target.checked)} />
        {' '}
        Only show products in stock
      </label>
    </form>
  );
}

const PRODUCTS = [
  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
];

export default function App() {
  return <FilterableProductTable products={PRODUCTS} />;
}

const [tasks, setTasks] = useState(initialTasks);
// 换成 Reducer 的版本，两个参数是 Reducer 功能和初始状态值↓
const [tasks, dispatch] = useReducer(tasksReducer, initialTasks);

const ref = useRef(0);/*
useRef(0) 会返回一个像这样的对象： { 
  current: 0  ← The value you passed to useRef
} */

const inputRef = useRef(null);
function handleClick() {
  // 可通过这个 Ref 操纵 DOM
  inputRef.current.focus();
}

<input ref={inputRef} />
<button onClick={handleClick}>
  Focus the input
</button>

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        // 读取 number=0
        setNumber(number + 1);  // 1.设置 number=0+1=1
        setNumber(number + 1);  // 2.设置 number=0+1=1
        setNumber(number + 1);  // 3.设置 number=0+1=1
        // 等这个事件里所有 set 都操作完，重新渲染，number 还是 1
      }}>+3</button>
    </>
  )
}

<button onClick={() => {
        setNumber(number + 5);  // 1. 0+5=5
        setNumber(n => n + 1);  // 2. 5+1=6
        setNumber(42);			// 3. =42
        // 依次执行，最后得到 42 
  }}>Increase the number
</button>

setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);
setEnabled(enabled => !enabled);

<ul>
    {notes.map(note => 
      <li key={note.id}>
        {note.content}
      </li>        
    )}
</ul>

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();  }
  render() {
    return <div ref={this.myRef} />;  }
}

const node = this.myRef.current;

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = null;
    this.setTextInputRef = element => {      this.textInput = element;    };
    this.focusTextInput = () => {      // 使用原生 DOM API 使 text 输入框获得焦点      if (this.textInput) this.textInput.focus();    };  }

  componentDidMount() {
    // 组件挂载后，让文本框自动获得焦点
    this.focusTextInput();  }

  render() {
    // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的引用存储到 React
    // 实例上（比如 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref={this.setTextInputRef}        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}        />
      </div>
    );
  }
}

import React, { useState } from 'react'

const App = () => {
  const [left, setLeft] = useState(0)
  const [right, setRight] = useState(0)

  return (
    <div>
      {left}
      <button onClick={() => setLeft(left + 1)}>left</button>
      <button onClick={() => setRight(right + 1)}>right</button>
      {right}
    </div>
  )
}

const App = () => {
  const [clicks, setClicks] = useState({
    left: 0, right: 0
  })

  const handleLeftClick = () => {
    const newClicks = { 
      left: clicks.left + 1, 
      right: clicks.right 
    }
    setClicks(newClicks)
  }
 
  /* 换成展开语法： */
  const handleRightClick = () => {
  const newClicks = { 
    ...clicks, 	// 具有 clicks 对象的所有属性的副本
    right: clicks.right + 1  // 新对象中 right 属性的值将为 clicks.right+1
  }
  setClicks(newClicks)
}

  return (
    <div>
      {clicks.left}
      <button onClick={handleLeftClick}>left</button>
      <button onClick={handleRightClick}>right</button>
      {clicks.right}
    </div>
  )
}

import React, { useState } from 'react'

const Statistics = (props) => {
  let good = props.good
  let neutral = props.neutral
  let bad = props.bad
  if (good + neutral + bad === 0) {
    return <p>还没有评价！</p>
  }
  return [
    <table>
      <tr><td>good</td><td>{good}</td></tr>
      <tr><td>neutral</td><td>{neutral}</td></tr>
      <tr><td>bad</td><td>{bad}</td></tr>
      <tr><td>all</td><td>{good + neutral + bad}</td></tr>
      <tr><td>average</td><td>{1.0 * good - 1.0 * bad}</td></tr>
      <tr><td>positive</td><td>{1.0 * good / (good + neutral + bad)}</td></tr>
    </table>
  ]
}

const App = () => {
  // save clicks of each button to own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  return (
    <div>
      <h1>评价</h1>
      <button onClick={() => setGood(good + 1)}>good</button>
      <button onClick={() => setNeutral(neutral + 1)}>neutral</button>
      <button onClick={() => setBad(bad + 1)}>bad</button>
      <h1>统计</h1>
      <Statistics good={good} neutral={neutral} bad={bad} />
    </div>
  )
}

export default App

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

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only JavaScript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

ReactDOM.render(
  <App notes={notes} />,
  document.getElementById('root')
)

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        {notes.map(note => 
          <li key={note.id}>
            {note.content}
          </li>        
        )}
      </ul>
    </div>
  )
}

import React from 'react'

const Note = ({ note }) => {
  return (
    <li>{note.content}</li>
  )
}

export default Note 	// 声明实时绑定导出

import React from 'react'
import Note from './components/Note'
const App = ({ notes }) => {
  // ...
}

import React from 'react'
import Course from './Course'

const App = () => {
  const courses = [{
      name: 'Half Stack application development',
      id: 1,
      parts: [{
          name: 'Fundamentals of React',
          exercises: 10,
          id: 1
        },{
          name: 'Using props to pass data',
          exercises: 7,
          id: 2
        },{
          name: 'State of a component',
          exercises: 14,
          id: 3
        },{
          name: 'Redux',
          exercises: 11,
          id: 4
        }
      ]
    },{
      name: 'Node.js',
      id: 2,
      parts: [{
          name: 'Routing',
          exercises: 3,
          id: 1
        },{
          name: 'Middlewares',
          exercises: 7,
          id: 2
        }
      ]
    }
  ]
  return (<div>
    <h1>Web Course</h1>
    {courses.map(course => 
      <Course course={course} />
    )}
  </div>)
}

export default App

import React from 'react'

const Header = ({name}) => {
  return [<h2>{name}</h2>]
}
  
const Content = ({parts}) => {
  const total = parts.reduce(
    // 第二个参数是reduce累加初始值，不写个0会被当成字符串加法
    (acc, cur) => acc + cur.exercises, 0	
  )

  return (
    <div>
    {parts.map(part => 
        <Part id={part.id} name={part.name} exercises={part.exercises}/>
    )}
    <p>Total: {total}</p>
    </div>
  )
}

const Part = ({id, name, exercises}) => {
  return (<p>
    {name}, {exercises}
  </p>)
}

const Course = ({course}) => {
  return (<>
    <Header name={course.name} />
    <Content parts={course.parts} />
  </>)
}

export default Course

import React, {useState} from 'react'

const Note = ({ note }) => {  
  return (<li>{note.content}</li>)
}

const App = (props) => {
  const [notes, setNotes] = useState(props.notes)
  const [newNote, setNewNote] = useState('a new note...') 
  const [showAll, setShowAll] = useState(true)
  const notesToShow = showAll    ? notes    : notes.filter(note => note.important === true)

  const addNote = (event) => {
    event.preventDefault()
    const noteObject = {
      content: newNote,
      date: new Date().toISOString(),
      important: Math.random() < 0.5,
      id: notes.length + 1,
    }
    setNotes(notes.concat(noteObject))
    setNewNote('')
  }

  const handleNoteChange = (event) => {    
    console.log(event.target.value)    
    setNewNote(event.target.value)
  }
  
  return (
    <div>
      <h1>Notes</h1>
      <div>
        <button onClick={() => setShowAll(!showAll)}>          
          show {showAll ? 'important' : 'all' }        
        </button>      
      </div>
      <ul>
        {notesToShow.map(note => <Note key={note.id} note={note} />)}
      </ul>
      <form onSubmit={addNote}>
        <input
          value={newNote}
          onChange={handleNoteChange}        />
        <button type="submit">save</button>
      </form>   
    </div>
  )
}

export default App

import React, { useState } from 'react'

const Person = ({person}) => {
  return (<><p>{person.name}: {person.number}</p></>)
}

const ShowPersons = ({persons, keyword}) => {
  return (<div>{
    persons.map(person => {
      // 正则表达式，模糊搜索，不区分大小写
      var reg = new RegExp(keyword, 'i') 
      var isHas = person.name.match(reg)
      if(isHas) {
        return <Person key={person.name} person={person}/>
      } else {
        // eslint-disable-next-line array-callback-return
        return;
      }
    })
  }</div>)
}

const Fliter = ({keyword, handleNewKeyword}) => {
  return(
    <div>search: <input value={keyword} onChange={handleNewKeyword}/></div>
  )
}

const PersonForm = ({newName, newNumber, addPerson, handleNewName, handleNewNumber}) => {
  return (<form>
    <div>
      name: <input value={newName} onChange={handleNewName}/>
    </div>
    <div>
      number: <input value={newNumber} onChange={handleNewNumber}/>
    </div>
    <div>
      <button type="submit" onClick={addPerson}>add</button>
    </div>
  </form>)
}

const App = () => {
  const [persons, setPersons] = useState([
    { name: 'Arto Hellas', number: '040-123456'},
    { name: 'Ada Lovelace', number: '39-44-5323523'},
    { name: 'Dan Abramov', number: '12-43-234345'},
    { name: 'Mary Poppendieck', number: '39-23-6423122'}
  ]) 
  const [newName, setNewName] = useState('plz enter a name ...')
  const handleNewName = (event) => {
    setNewName(event.target.value)
  }
  const [newNumber, setNewNumber] = useState('1000000')
  const handleNewNumber = (event) => {
    setNewNumber(event.target.value)
  }
  const [keyword, setNewKeyWord] = useState('')
  const handleNewKeyword = (event) => {
    setNewKeyWord(event.target.value)
  }
  const addPerson = (event) => {
    // event.preventDefault() 会阻止提交表单的默认操作（页面重新加载）
    event.preventDefault()  
    const newPerson = {
      name: newName,
      number: newNumber
    }
    // 判断个相等怎么这么多事啊
    let isSame = persons.some(p => JSON.stringify(p.name) === JSON.stringify(newPerson.name)) 
    if (isSame) {
      window.alert(`"${newName}" is already added to phonebook! `);      
    } else {
      setPersons(persons.concat(newPerson))
    }    
    setNewName("plz enter a name ...")
  }

  return (
    <div>
      <h2>Phonebook</h2>
      <Fliter 
        keyword={keyword} 
        handleNewKeyword={handleNewKeyword} 
      />
      <h2>Add new number</h2>
      <PersonForm
        newName={newName}
        newNumber={newNumber}
        addPerson={addPerson}
        handleNewName={handleNewName}
        handleNewNumber={handleNewNumber}      
      />
      <h2>Numbers</h2>
      <ShowPersons keyword={keyword} persons={persons}/>
    </div>
  )
}

export default App

import axios from 'axios' 

const App = () => {  
  const hook = () => {
    console.log('effect')
    axios
      .get('http://localhost:3001/persons')
      // axios.get 从服务器获取到数据，并将 .then() 包含的函数注册为事件处理:
      .then(response => { 
        console.log('promise fulfilled')
        console.log(response.data)
      })
  }
  // useEffect 第一个参数是函数本身，第二个参数是指定effect运行的频率
  useEffect(hook, [])
  return ''
}

export default App

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const CountriesFliter = ({countries, keyword}) => {
  return(<div>{
    countries.map(country => {
      // 正则表达式，模糊搜索，不区分大小写
      var reg = new RegExp(keyword, 'i') 
      var isHas = country.name.common.match(reg)
      if(isHas) {
        return <Country country={country} key={country.name.common}/>
      } else {
        // eslint-disable-next-line array-callback-return
        return;
      }
    })
  }</div>)
}

const Country = ({country}) => {
  return (<div>
    {country.name.common}
  </div>)
}

const App = () => {  
  const [countries, setCountries] = useState([])
  const [keyword, setKeyword] = useState('Enter a keyword ...')
  const handleKeyword = (e) => {
    setKeyword(e.target.value)
  }

  const hook = () => {
    console.log('effect')
    axios
      .get('https://restcountries.com/v3.1/all')
      // axios.get 从服务器获取到数据，并将 .then() 包含的函数注册为事件处理:
      .then(response => { 
        console.log('promise fulfilled!')
        console.log(response.data)
        setCountries(countries.concat(response.data))
      })
  }
  // useEffect 第一个参数是要运行的函数，第二个参数是指定effect运行的频率
  useEffect(hook, [])

  return (<div>
    <h3>search countries by keyword: <input value={keyword} onChange={handleKeyword}/></h3>
    <CountriesFliter countries={countries} keyword={keyword}/>
  </div>)
}

export default App

import React, { useState, useEffect } from 'react'
import axios from 'axios'

const Note = ({ note }) => {
  return (
    <li>{note.content}</li>
  )
}

const App = () => {
  const [notes, setNotes] = useState([])
  const [newNote, setNewNote] = useState('')
  const [showAll, setShowAll] = useState(false)

  useEffect(() => {
    console.log('effect')
    axios
      .get('http://localhost:3001/notes')
      .then(response => {
        console.log('promise fulfilled')
        setNotes(response.data)
      })
  }, [])
  console.log('render', notes.length, 'notes')

  const addNote = (event) => {
    event.preventDefault()
    const noteObject = {
      content: newNote,
      date: new Date().toISOString(),
      important: Math.random() > 0.5,
    }

    axios
    .post('http://localhost:3001/notes', noteObject)
    .then(response => {
      setNotes(notes.concat(response.data))
      setNewNote('')
    })
  }

  const handleNoteChange = (event) => {
    console.log(event.target.value)
    setNewNote(event.target.value)
  }

  const notesToShow = showAll
  ? notes
  : notes.filter(note => note.important)

  return (
    <div>
      <h1>Notes</h1>
      <div>
        <button onClick={() => setShowAll(!showAll)}>
          show {showAll ? 'important' : 'all' }
        </button>
      </div>   
      <ul>
        {notesToShow.map(note => 
            <Note key={note.id} note={note} />
        )}
      </ul>
      <form onSubmit={addNote}>
        <input
          value={newNote}
          onChange={handleNoteChange}
        />
        <button type="submit">save</button>
      </form>  
    </div>
  )
}

export default App

const express = require('express')
const app = express()
var morgan = require('morgan')

// 自定义的 morgan token 和使用方式
morgan.token('token_for_body', function (req, res) { 
  return JSON.stringify(req.body)
})
// 会记录在控制台日志信息：POST /api/persons 15.808 {"name":"Chris","number":"123456"}
app.use(morgan(':method :url :response-time :token_for_body '))

let persons = [{ 
    "id": 1,
    "name": "Arto Hellas", 
    "number": "040-123456"
  }, { 
    "id": 2,
    "name": "Ada Lovelace", 
    "number": "39-44-5323523"
  }, { 
    "id": 3,
    "name": "Dan Abramov", 
    "number": "12-43-234345"
  }, { 
    "id": 4,
    "name": "Mary Poppendieck", 
    "number": "39-23-6423122"
  }
]

app.use(express.json())

app.get('/', (req, res) => {
  res.send('<h1>Hello World!</h1>')
})

app.get('/api/persons', (req, res) => {
  res.json(persons)
})

app.get('/api/info', (req, res) => {
  let num = persons.length
  let cur_time = new Date().toLocaleTimeString()
  res.send(`
  Phonebook has info for ${num} people.<br>
  Get time: ${cur_time}
  `)
})

// 用冒号为 express 路由定义参数
app.get('/api/persons/:id', (request, response) => {
  // 不类型转换这个参数就会被 JS 当成字符串
  const id = Number(request.params.id)
  const person = persons.find(person => person.id === id)
  if (person) {      // 所有的 JavaScript 对象都会被当作 true
    response.json(person)  
  } else {    
    response.status(404).end()  
  }
})

// 删除 api 
app.delete('/api/persons/:id', (request, response) => {
  const id = Number(request.params.id)
  persons = persons.filter(person => person.id !== id)
  response.status(204).end()
})

const generateId = () => {
  const Id = persons.length > 0
  // `...` 是数组展开语法
    ? 1 * Math.floor(Math.random() * (0xFF))
    : 0
  return Id + 1
}

function isEmpty(str) {
  if (str == 'undefined' || !str || !/[^\s]/.test(str)) {
    //为空
    return true
  }
  return false
}

// 发送新便签
app.post('/api/persons', (request, response) => {
  const body = request.body
  console.log(body)
  if (!body) {
    return response.status(400).json({ 
      error: 'content missing' 
    })
  }

  const person = {
    id: generateId(),
    name: body.name, 
    number: body.number
  }

  let isSame = persons.some(p => 
    JSON.stringify(p.name) === JSON.stringify(person.name)
  ) 
  if (isSame) {
    return response.status(406).json({ 
      error: 'name must be unique'
    })
  } else if (isEmpty(person.number)) {
    return response.status(406).json({ 
      error: 'number can not be empty'
    })
  } else if (isEmpty(person.name)) {
    return response.status(406).json({ 
      error: 'name can not be empty'
    })
  } else {
    persons = persons.concat(person)
    response.json(person)
  }  
})

const PORT = 3001
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`)
})