React是什么

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

1.必备工具npm

npm是一个流行的(成熟的javascript打包工具)
npx可以简单的认为是npm的改良版，参见 npx 使用教程

2.单刀直入,创建react应用

$ npx create-react-app ludo_frontend
npx: 67 安装成功，用时 13.975 秒

............

  cd ludo_frontend
  npm start

Happy hacking!
$

3.构建打包

npm run build
会在./build/ 文件夹内生成你应用的最新版本

4.添加新的第三方包

npm install react-admin ra-data-json-server prop-types
或者
yarn add react-admin ra-data-json-server prop-types

理解项目结构

1.入口

public/index.html

<div id="root"></div>

后续组件就是挂载载root这里
参见src/index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

「import App from './App'」即src/App.js文件，所以也可以理解为App是实际的根节点，App被称为组件，组件是react中最重要的组成
关于import语法

如果使用export default Xxx;导出的，可以使用import Xxx from 'module';
但是一个模块只能导出一个默认属性
其他的都是使用export Yyy导出的，这种需要使用import { Yyy } from 'module';
非默认的属性可以导出多个，每个模块默认导出只能是1个或者0个

重要概念

1.组件

从类组件到函数组件的变迁

• 类组件有很复杂的生命周期管理
• 函数组件使用hooks可以轻松管理生命周期，如useEffect
• 类组件需要显示继承自React.Component
• 函数组件根据返回值就可以推测出父类

// 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// 箭头函数
const Welcome = (props) => (
<h1>Hello, {props.name}</h1>;
)
// 或者
const Welcome = (props) => {
  return (<h1>Hello, {props.name}</h1>);
}

2.属性props

props是组件的属性，可以从根部向下流，只读

3.状态state

state是组件自有的状态，状态的变化会影响子组件的重绘

4.钩子hooks

hooks是方便函数组件管理生命周期的语法糖