1. React简介

创建项目

用create-react-app创建项目

npx create-react-app part1

启动项目

cd part1
npm start 
# 或者yarn start

组件

index.js

import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

App.js 组件

//import React from 'react'
const App = () => {
    const now = new Date()
    const a = 10
    const b = 20
    console.log('Hello from component')
    return (
        <div>
            <p>Hello World, it is {now.toString()}</p>
            <p>
                {a} plus {b} is {a + b}
            </p>
        </div>
    )
}
export default App

App.js用的是JSX语法
JSX 是一种“类XML”语言，这意味着每个标签都需要关闭。如

<br />

多组件

修改App.js, 添加Hello组件，组件可以复用

//import React from 'react'
const Hello = () => (
    <div>
        <p>Hello World</p>
    </div>
)
const App = () => (
    <div>
        <h1>Greetings</h1>
        <Hello />
        <Hello />
        <Hello />
    </div>
)
export default App

React 的核心理念，就是将许多定制化的、可重用的组件组合成应用。

Props: 向组件传递数据

const Hello = (props) => (
    <div>
        <p>Hello {props.name}, you are {props.age} years old</p>
    </div>
)
const App = () => {
    const name = 'Peter'
    const age = 10
    return (
        <div>
            <h1>Greetings</h1>
            <Hello name="Maya" age={26 + 10} />
            <Hello name={name} age={age} />
        </div>
    )
}

props作为函数参数，接收一个对象
可以有任意数量的props
JavaScript表达式需要用花括号{}括起来

Some Notes

1. 控制台应始终开着，发现错误应试图理解错误并解决，多用console.log()
2. 组件名首字母必须大写

3. 组件必须有一个根元素，如果不想有额外的div，可以用空元素<></>

   const Hello = (props) => (
    <>
        <p>Hello {props.name}, you are {props.age} years old</p>
    </>
   )

4. create-react-app 会自动使项目成为一个 git 仓库，除非应用是在已有仓库中创建的。 而您很可能不希望项目成为一个存储库，因此可以在项目的根目录中运行命令rm -rf .git 。