React全家桶

一. 说明

工作需要，最近学习下react

官网：https://react.docschina.org/ https://zh-hans.reactjs.org/

二. React简介

1. 说明

用于构建用户界面的 JavaScript 库 ( 官网: https://react.docschina.org/ )，React由Facebook来更新和维护，它是大量优秀程序员的思想结晶：

(1).React的流行不仅仅局限于普通开发工程师对它的认可；

(2).大量流行的其他框架借鉴React的思想；

2. 哪些公司在用

阿里云、哔哩哔哩、快手、小米

3. 快速上手

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

    <!-- 引入三个必备库 -->
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">

        // 1. 声明组件(类组件的模式)
        class App extends React.Component {
            //1.1 构造函数
            constructor() {
                super();
                // 数据放到state里
                this.state = { msg: 'hello word', name: 'ypf', age: 18 }

                // 写法1：提前绑定，解决this为undefined的问题
                this.btnClick = this.btnClick.bind(this);
            }
            //1.2 组件方法
            btnClick() {
                console.log('btnClick', this);
                this.setState({ msg: 'hello react' });
            }
            //1.3 渲染方法
            render() {
                return (
                    <div>
                        <h2>{this.state.msg}</h2>
                        <button onClick={this.btnClick}>修改信息</button>
                    </div>
                );
            }
        }
        // 2. 把组件渲染到页面上
        const root = ReactDOM.createRoot(document.querySelector('#root'));
        root.render(<App />)
    </script>
</body>

三. 目录

阶段一：React专题

第一节：react简介和入门用法

第二节：jsx语法深度剖析和jsx本质的探究

第三节：react脚手架的使用及类组件、函数组件、生命周期剖析

第四节：组件通信剖析(父传子、子传父、非父子)、组件插槽的用法剖析

第五节：setState详解、react更新机制、render函数优化、数据不可变、ref获取DOM和组件

第六节：受控组件、portals、fragment、严格模式

第七节：高阶组件详解和动画详解

第八节：react编写css的六种方案剖析

第X节：xxxxxxxxxxxxxxxx

阶段二：Redux专题