reactjs

ReactJS入门

首先是乌米js
官网：https://umijs.org/zh/
想深入了解的同学，看官网吧：可插拔的企业级react应用框架
首先安装nodejs
接下来，开始安装yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些
可以把yarn看做了优化了的npm

npm i yarn tyarn -g

下面开始安装umi

tyarn global add umi

入门

创建项目

通过初始化命令将生成package.json文件，它是 NodeJS 约定的用来存放项目的信息和配置等信息的文件。初始化完成

tyarn init -y

在命令输入如下命令：项目中添加umi的依赖

tyarn add umi --dev

依赖已经导进来了

编写hello world程序

在UmiJS的约定中，config/config.js将作为UmiJS的全局配置文件。
config.js文件中输入

export default{};

Hello Word.js中内容

export default () => {
    return <div>hello world</div>;
}

启动

umi dev

访问

js中嵌套html代码有点东西啊。这是react特有的另起了一个名JSX。

添加umi-plugin-react插件

umi-plugin-react插件是umi官方基于react封装的插件，包含了13个常用的进阶功能。
添加插件

tyarn add umi-plugin-react --dev

在config.js中加入代码

export default{
    plugins: [
        ['umi-plugin-react', {

        }]
    ]
};

构建和部署

现在我们写的js，必须通过umi先转码后才能正常的执行，那么我们最终要发布的项目是普通的html、js、css。可以通过命令

umi build

开始步入正题

使用要JSX注意的语法

1 所有的html标签必须是闭合的
2 在JSX语法中，只能有一个根标签，不能有多个

组件

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件，像这样：

瞎画的，学前端的都知道组件，我只是形象下，如果觉得不得劲我可以删掉。
在React中，这样定义一个组件：

import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component
    render(){ //第三步，重写render()方法，用于渲染页面
        return <div>hello world</div> //JSX语法
    }
}
export default HelloWorld; //第四步，导出该类

状态

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新渲染页面。
其中，要注意两点：
一： this.state值的设置要在构造参数中完成；
二：要修改this.state的值，需要调用this.setState()完成，不能直接对this.state进行修改；
下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新this.state，从而反应到页面中。

import React from 'react'
class List extends React.Component{
    constructor(props){
        // 构造参数中必须要props参数
        super(props); // 调用父类的构造方法
        this.state = {
            // 初始化
            this.state dataList : [1,2,3],
            maxNum : 3 };
    }
    render(){
        return (
            <div>
                <ul>{
                    // 遍历值
                    this.state.dataList.map((value,index) => {
                        return <li key={index}>{value}</li>
                    })
            }
            </ul>
            <button
                onClick={()=>{
                    //为按钮添加点击事件
                    let maxNum = this.state.maxNum + 1;
                    let list = [...this.state.dataList, maxNum];
                    this.setState({
                        //更新状态值
                        dataList : list, maxNum : maxNum
                    });
                }}>
        添加
        </button>
        </div>
    );
    }
}
export default List;

最后就是想启动服务呢结果遇见了这个错误

最后仙人指路:去github上找Ant Design Pro，下载压缩包然后在输入下面命令这样玩吧

tyarn install #安装相关依赖
tyarn start #启动服务

气死我了，没解决，真难受。我变了遇见错误都不想解决了，这是不让我学前端啊，真级麻烦