react

作者: 林ze宏 | 来源:发表于2018-01-11 22:53 被阅读0次
  • npm init

  • npm install --save react react-dom babelify babel-preset-reac

  • npm install babel-preset-es2015 --save (save就是保存到配置文件中)

  • npm install -g webpack-dev-server 全局安装

  • npm install -g webpack 全局安装

  • npm install webpack-dev-server 项目本地安装(webpack-dev-server是一个小型的Node.js Express服务器,)

  • npm install webpack

  • npm install babel-loader --save

  • npm install babel --save

  • npm install babel-core --save
    https://ant.design/docs/react/introduce-cn (ant design安装)

  • npm install antd --save

  • npm install --save react-router

  • npm install react-router-dom --save(4v,需要安装react-router-dom)

  • npm install react-responsive --save(移动端适配)

  • npm install react-touch-loader(下拉刷新, 加载更多)
    https://github.com/Broltes/react-touch-loader

less-loader,需要增加包less-loader和less包
  • npm install less --save-dev
  • npm install less-loader --save-dev
webpack.config.js 配置
{test: /\.less$/, loader: 'style-loader!css-loader!less-loader'}
  • npm install redux --save

根目录:webpack.config.js
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/js/index.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: {
    path: __dirname,
    filename: "./src/bundle.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

最后运行:webpack

webpack-dev-server
webpack-dev-server --inline --hot(运行这个就可以了)
(webpack-dev-server --content-base build --inline --hot)

相关文章

  • React基础

    react 教程 react 组件介绍 react state 介绍 react Props 介绍 React:组...

  • 学习react no.1

    学习react no.1 react 定义 react 特点 react

  • React Native 学习之路

    React 相关资料 React Components React Properties React State ...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React面试题 整理脑图

    react基础 React生命周期 react-router react进阶 react Hooks redux 其他

  • react 导入中的 as

    import React from 'react'只导入 是 React。 而import * as React ...

  • ES5与ES6小结部分

    1var React=require('react'); 等价 import React from ' react...

  • React DnD基础概念和整体架构

    React DnD 的英文是 Drag and Drop for React。React DnD 是 React ...

  • React

    React 《React 官网文档》 React简介 React概念 React官网学习实践 - jSX简介 Re...

  • React学习笔记_01

    React 基础组件 react概述 npm i react react-dom react包 是核心,提供创建元...

网友评论

      本文标题:react

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