ReactJS入门之环境搭建以及编写HelloWorld程序

输入命令，进行初始化：

tyarn init -y

在命令输入如下命令：

tyarn add umi --dev #项目中添加umi的依赖

在config.js文件中输入以下内存，以便后面使用：

//导出一个对象，暂时设置为空对象，后面再填充内容
export default {};

在HelloWorld.js文件中输入如下内容：

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

在这里，可以会比较奇怪，怎么可以在js文件中写html代码，其实，这是react自创的写法，叫JSX，后面我们再细说。

第三步，启动服务查看页面效果

#启动服务
umi dev

可以看到，通过/HelloWorld路径即可访问到刚刚写的HelloWorld.js文件。

在 umi 中，可以使用约定式的路由，在 pages 下面的 JS 文件都会按照文件名映射到一个路由，比如上面这个例子，访问 /helloworld 会对应到 HelloWorld.js。

当然了，也可以自定义路由，具体的路由配置在后面讲解。

添加umi-plugin-react插件

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

具体可查看：https://umijs.org/zh/plugin/umi-plugin-react.html 

#添加插件
tyarn add umi-plugin-react --dev 

接下来，在config.js文件中引入该插件：

export default {
    plugins: [
        ['umi-plugin-react', {
            //暂时不启用任何功能
        }]
    ]
};

构建和部署

现在我们写的js，必须通过umi先转码后才能正常的执行，那么我们最终要发布的项目是普通的html、js、css，那么应该怎么操作呢？

其实，通过umi是可以进行转码生成文件的，具体操作如下： 

umi build

首先，看到的是umi.js文件是一个已经压缩过的文件，然后搜索“hello world”，可以找到，我们刚刚写的代码已经被转码了。