美文网首页
React项目搭建

React项目搭建

作者: bug喵 | 来源:发表于2017-11-14 11:30 被阅读0次

    1.新建一个文件夹,在此文件夹里调出命令行。

    2.输入npm init,生成package.json配置文件。在此过程中,命令行窗口会提示你输入一些基本的配置信息,这些一开始都只要一路回车就可以,以后想改可以直接打开package.json文件手动改写。

    之后安装插件,不需要在webpack里面配置,直接配置在package.json中时,有两种方式:(1)直接写在文件中的dependencies或devDependencies中,然后重新npm install (2)在命令行里通过--save-dev 或--save 安装,安装完后文件中的dependencies和devDependencies字段会相应自动写入插件相关信息。

    dependencies是运行时(发布后)依赖,devDependencies是开发时的依赖。
    --save-dev 是你开发时候依赖的东西,--save 是你发布之后还依赖的东西。
    比如,你写 ES6 代码,如果你想编译成 ES5 发布那么 babel 就是devDependencies。
    如果你用了 jQuery,由于发布之后还是依赖jQuery,所以是dependencies。
    如果上线之后项目还依赖的模块,直接放 dependencies 里就行了,devDependencies 里面就不用放了,开发的时候会自动去调用 dependencies 中的模块的,不需要重复了。
    比如,我做项目用到了 vue vuex n-zepto ,这三个模块都是上线之后还需要依赖的,那么我直接放到 dependencies 里,devDependencies 里不需要放。开发的时候功能不会受到任何影响。

    3.安装webpack:关于webpack的种种,这里不说了,不会的请自行查阅我的工具类文集中的《手把手超详细webpack基础入门》。

    4.安装babel(转换react的jsx和es6)npm install babel-loader --save-dev
    npm install babel-core babel-preset-es2015 babel-preset-react --save-dev

    5.安装React:npm install react 与 npm install react-dom

    6.js文件中写入:

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
    );
    

    到此,就可以用React写一个HelloWorldl了。

    7.安装react-router:npm install --save react-router。

    未完,待续

    相关文章

      网友评论

          本文标题:React项目搭建

          本文链接:https://www.haomeiwen.com/subject/euotpxtx.html