前端开发_8.React学习总结

目录

• 一、参考链接：
• 二、启动

一、参考链接：

ReactUI组件库：

• https://mui.com/ （https://v4.mui.com/zh/components/box/）
• https://react-bootstrap.github.io/
• https://ant.design/index-cn
• https://github.com/microsoft/fluentui
• https://github.com/rsuite/rsuite

React 教程：

• https://www.react-native.cn/ （React Native 中文网）
• https://react.dev/ （官网）
• https://react.docschina.org/ （中文官网）
• https://legacy.reactjs.org/docs/introducing-jsx.html （文档）
• https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started

路由、状态库：

• https://reactrouter.com/
• https://cn.react-redux.js.org/
• https://github.com/apollographql/react-apollo

React 案例参考学习：

1. https://github.com/909652769/vite-react https://juejin.cn/post/7086024530560286734#heading-4
2. https://github.com/Magiccwl/dzdp-react https://juejin.cn/post/6844903629619478536#heading-6
3. https://juejin.cn/post/7108555432997683237
4. https://juejin.cn/post/7169108697950453773

二、启动

//用cLl启动
npx create-react-app my-app
cd my-app
npm start
//JSX 表达式 props
const heading = <h1>Mozilla Developer Network</h1>;
<App subject="Clarice" />
function App(props) {
  const subject = "React";
  console.log(props);
  return (
    // return statement
  );
}
//state:
this.setState({comment: 'Hello'});
// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));
//创建一个组件：
mkdir src/components
touch src/components/Todo.js
export default function Todo(props) {
    function HandleValue(e){
        e.preventDefault();
        console.log("zhouyaaaaaaaaaaaa");
    }
    return (
      <button onClick={HandleValue}>Button{props.name}</button>
    );
  }
import Todo from './components/Todo'
<Todo name="Eat" />
<Todo name="Sleep" />
<Todo name="Repeat" />