dva-cli来构建React项目

React很繁荣

react.js很繁荣,社区也是相当的活跃,于是我们就没有理由不会用了。前段时间了解了react的基础语法。这段时间决定,更深入的使用一下react,那就是用构建工具来开发一个项目。我这次用的是dva-cli,蚂蚁金服开源出来的一个轮子。

决定用这个客户端,来重构一下,公司的智能小家电项目。项目倒是不难,就是来练手。

开始使用

基本就是先安装dva-cli。

安装

<code class="language-null">npm/cnpm install dva-cli -g
</code>

然后,我们初始化一个项目

<code class="language-null">dva new &lt;projectname&gt;
</code>

启动项目

<code class="language-null">cd &lt;projectname&gt; 
npm run start 开发环境下
npm run build 生产环境下压缩,打包
</code>

引入一些东西

  • 首先引入fastclick,解决300ms延迟的问题
  • 然后引入rem.js(目前,只能在模板的html中用写在script中,因为从外部引入,会报错,具体原因,不是很明确)
  • 样式重置,直接放在了index.css中了。
<code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /&gt;
    &lt;script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        if (!window.Promise) {
            document.writeln('&lt;script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '&gt;' + '&lt;' + '/' + 'script&gt;');
        }
    &lt;/script&gt;
    &lt;script&gt;
      !function(e,t){function n(){t.body?t.body.style.fontSize=12*o+"px":t.addEventListener("DOMContentLoaded",n)}function d(){var e=i.clientWidth/10;i.style.fontSize=e+"px"}var i=t.documentElement,o=e.devicePixelRatio||1;if(n(),d(),e.addEventListener("resize",d),e.addEventListener("pageshow",function(e){e.persisted&amp;&amp;d()}),o&gt;=2){var a=t.createElement("body"),s=t.createElement("div");s.style.border=".5px solid transparent",a.appendChild(s),i.appendChild(a),1===s.offsetHeight&amp;&amp;i.classList.add("hairlines"),i.removeChild(a)}}(window,document);
    &lt;/script&gt;
    &lt;link rel="stylesheet" href="/index.css" /&gt;
    &lt;title&gt;Dva Demo&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
</code>

安装antd-mobile,babel-plugin-import,可以按需加载组件,不然打包可能会非常大

<code class="language-null">npm/cnpm install antd-mobile babel-plugin-import --save
接着,我们还需要在.roadhogrc文件中改一下
  "extraBabelPlugins": [
        "transform-runtime"
        "transform-runtime",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    ],
这样就大功告成,完成了项目基本的配置。
</code>

关于样式的问题

我发现,在项目中改antd-mobile样式不生效。后来发现,如果我们想改antd-mobile样式,需要这么改。直接上写法代码,当然我用的是less

<code class="language-less">    :global {
        .am-navbar-light {
            /* background-color:#38383c; */
            background: #38383c;
            color: #fff;
            .am-navbar-title {
                color: #fff;
            }
        }
    }
</code>

关于在js组件中进行路由的跳转

我不知道是因为版本的原因还是别的原因,文档中对于这块没有提一嘴,特别烦躁。这还是经过尝试打印出this对象发现的。。。,跑到segmentfault上提问,给出的回答也是云里雾里,真是乱花渐欲迷人眼。

<code class="language-js">this.props.history.push('/path');
</code>

如果想在遍历的元素或者组件上添加事件同时传递别的参数

在事件中,我们很多时候向传递别的参数,不单单是event对象,比如我想传递index下标

<code class="language-js">handleClick = (index,e) =&gt; {
    // 处理逻辑吧
}
this.state.items.map((item,index) =&gt; {
    return (
        &lt;div onClick={this.handleClick.bind(this,index)}&gt;&lt;/div&gt;
    )
})
</code>

发表评论

电子邮件地址不会被公开。 必填项已用*标注