一步一步写web之react实战（二）

这一篇是在webpack完成之后开始的，其实内容并不多，不过也卡了一下。

还是一点点尝试吧，现在一句webpack教程写了一写代码，并且也跑起来了，那么怎么加入react的东西呢？还是先百度react+es6+webpack深入浅出觉得挺不错的，试试看！看了教程发现不想完全按照他的来，干脆找找把需要的东西加在我们的代码上，不完全按照这个教程来，只做参考用。

从2开始，发现react和react-dom是我们需要的，应该加上，按照他的来，添加一下。webpack我们已经安装了，但是看他的配置里有一个插件项

 //插件项
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]

这个不知道有没有用，看下面介绍觉得应该会需要，用不用得着先加上。

再往下看，babel，es6到es5转换的东西，按照他的教程，一步一步都安装了。再往下看就是他的代码嵌入部分，这里我们就可以不用参考他的了。

webpack的入口是entry.js我们最先应该也在这里加代码，那我们就加一个

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/js/app';

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

这里import了一个js文件，app.js是我从react官网考来的，运行webpack，刷新页面成功显示一步一步写web之react实战（二）

刚吐槽要这里的样式太丑还会自动跳整要重新找个安身之所就给我玩消失，哎，在写一遍吧，还好给我留了半篇文章，不然真的就没心思写了。其实上面的代码是我试验成功后的产物，真正写的时候没这么顺利。

首先我想到的是在index.html里加一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>
<body>
<div id="root"></div>
    <script src="bundle.js"></script>
    <script src="src/js/app.js"></script>  //加的就是这一行
</body>
</html>

然后看刚才的教程他的index.html里script引用还有type，于是我也加了。运行webpack，然后悲剧了，页面一篇空白！什么数据都没！也没报错！然后我想是不是jsx编译出问题了呀，不认jsx语法?参考的index.html head里还有一行

 <script src="build/JSXTransformer.js"></script>

不管是不是，先加了再说，百度，下载，引入，编译，运行，还是报错。接着百度，发现不需要type这个属性，于是删除，运行，只显示webpack运行成功的内容。我们加的react还没显示。又去entry.js加内容。这时提示import报错

在接着排查，发现index.html中的

<script type="text/jsx" src="src/js/app.js"></script>

这一行不需要。至此方才明朗。附git链接： https://github.com/dwenb/reactLearning/commits/master。

这一篇和上一篇主要依据webpack文档呈现react。从下一篇起才算正式开启react实战，我们的构建项目方式也会以官方文档为主，不在盲目的试验了。

秒客网

一步一步写web之react实战（二）

相关文章