react入门1

准备

安装node和npm
安装create-react-app(npm install -g create-react-app)

创建project

create-react-app lession1

修改src/App.js内容

import React, { useState } from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";

function Home() {
  return (
    <ul>
      <li>
        <Link
          to={{
            pathname: "/page1",
            state: { name: "demo" }
          }}
        >
          Page1
        </Link>
      </li>
      <li>
        <Link to="page2">Page2</Link>
      </li>
    </ul>
  );
}

function Page1(props) {
  let {
    location: {
      state: { name }
    }
  } = props;
  let [state, setState] = useState(name);
  let onChange = e => {
    setState(e.target.value);
  };
  return (
    <div>
      <h1>我是Page1</h1>
      <input type="text" name="name" onChange={onChange} value={state} />
    </div>
  );
}

function Page2() {
  return <h1>我是Page2</h1>;
}

function FunctionDemo() {
  return (
    <div className="App">
      <Router>
        <Route path="/" component={Home} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
      </Router>
    </div>
  );
}
export default FunctionDemo;