新找了一个教程，react教程
创建项目

npx create-react-app moz-todo-react

启动项目

npm start

显示自己定义的变量

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

function App() {
  const subject = "React";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello,{subject}
        </p>
      </header>
    </div>
  );
}

export default App;

组件传参

index.js中传递参数

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


ReactDOM.render(
    <App subject="Clarice"/>,
  document.getElementById('root')
);

app.js将传递参数输出到控制台

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

function App(props) {
  const subject = "React";
  console.log(props)
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello,{subject}
        </p>
      </header>
    </div>
  );
}

export default App;

输出我们的属性，app.js

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

function App(props) {
  console.log(props.subject)
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Hello,{props.subject}
        </p>
      </header>
    </div>
  );
}

export default App;

小结：（原汁原味的知识点）

• Components can import modules they need, and must export themselves at the bottom of their files.
• Component functions are named with PascalCase.
• You can read JSX variables by putting them between curly braces, like {so}.
• Some JSX attributes are different to HTML attributes, so that they don’t conflict with JavaScript reserved words. For example, class in HTML translates to className in JSX. Note that multi-word attributes are camel-cased.
• Props are written just like attributes inside component calls, and are passed into components.
  嘿嘿，虽然是英文版教程，看的似懂非懂的，但是代码还是能看懂的，不了说代码才是最好的老师么。