工具说明

  • Node
  • Koa
  • React
  • Webpack

项目结构

- build  客户端代码的构建文件目录
- config 项目的配置文件
- docs 项目相关的文档目录
- lib 服务端库文件
- logs 日志文件目录
- mock mock假数据目录
- node_modules
- server 服务端源代码存放目录
- controllers 控制器
- routes 路由
- service 接口
- views 视图
- src 客户端源代码存放目录
- components
- pages
- views 视图
- tests 测试文件目录

准备开发环境

  1. mkdir build config docs lib logs mock server src tests
  2. npm init --yes 生成项目的初始文件
  3. npm i koa koa-logger koa-route koa-static co-views --save 安装服务器端的相关依赖
  4. npm i babel-cli babel-preset-es2015-node5 --save 安装babel依赖,动态编译es6代码
  5. npm i babel-loader babel-preset-es2015 babel-preset-react --save 安装Babel相关依赖,用于编译React代码。
  6. npm i webpack webpack-dev-server --save-dev 安装webpack打包工具,只在开发环境使用
  7. npm i react react-dom --save
  8. npm i mcss mcss-loader --save
  9. npm i css-loader file-loader raw-loader json-loader style-loader --save-dev 安装mcss相关依赖,编译css,json等静态资源
  10. 创建Webpack配置文件:config/webpack.config.js
  11. package.json文件里新增:
    "scripts": {
    "start": "babel-node src/pages/demo1.js",
    "build": "webpack --config config/webpack.config.js",
    "watch": "webpack-dev-server --config config/webpack.config.js --hot --inline --progress --colors --devtool eval"
    },
    "babel": {
    "presets": [
    "es2015-node5"
    ]
    },

  12. 创建入口文件 /src/pages/demo1.js
  13. 编写组件 /src/components/root.jsx
  14. 编写JS文件,引用组件 /src/controllers/root.js
  15. 定义视图文件,引入JS /src/views/root.html
  16. 使用npm run build生成打包JS文件
  17. 使用npm run watch启动webpack-dev-server
  18. 打开浏览器访问http://localhost:8080查看结果

参考:(按优先级排列)
http://wwsun.github.io/posts/react-with-es6-part-1.html
http://www.aliued.com/?p=3077

es6+react环境搭建的更多相关文章

  1. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  2. React 环境搭建及页面调试方法

    React 环境搭建及页面调试方法 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和博客园共有 ...

  3. 最小白的webpack+react环境搭建

    本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭 ...

  4. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  5. 从零开始react实战:云书签-1 react环境搭建

    总览篇:react 实战之云书签 本篇是实战系列的第一篇,主要是搭建 react 开发环境,在create-react-app的基础上加上如下功能: antd 组件库按需引入 ,支持主题定制 支持 l ...

  6. react环境搭建及文件配置

    webpack简介 构建工具(基于Nodejs)node(v16)前端工程化. 环境搭建 创建一个空的package.json npm init webpack核心包(提供了API,插件) npm i ...

  7. react+es6+webpack环境搭建以及项目入门

    前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...

  8. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  9. react环境搭建

    react-webpack文件夹是开发目录,在此目录下执行命令,假设你已经正确安装了 nodejs 一:参照教程搭建环境 https://github.com/newtriks/generator-r ...

随机推荐

  1. java多线程学习

    在java中要想实现多线程,有两种手段,一种是继续Thread类,另外一种是实现Runable接口. 一.扩展java.lang.Thread类 package com.multithread.lea ...

  2. python-1 python基础知识

    python第一课代码笔记 hello world [root@heartbeat-data- python]# vim hello1.py #!/usr/bin/env python print ( ...

  3. Makefile隐含规则

    两个隐含规则; 将所有的name.o的依赖自动推导为name.c并使用规则$(CC) -c $(FLAGS) $(CPPFLAGS)得到目标.这个规则中只有-c是隐含规则中有的,后面两个变量是留给用户 ...

  4. sed入门详解教程

    sed是一个比较古老的,功能十分强大的用于文本处理的流编辑器,加上正则表达式的支持,可以进行大量的复杂的文本编辑操作.sed本身是一个非常复杂的工具,有专门的书籍讲解sed的具体用法,但是个人觉得没有 ...

  5. C++杂谈(二)初识vector容器与迭代器

    教科书中失踪的vector 很奇怪的一件事情,在当时学习C++的时候,老师并没有讲授容器的内容,当时参考的谭浩强老师的红皮C++也没有这个内容,不知为何.后来再学C++,发现容器是一个很重要的概念,在 ...

  6. 描述Linux系统开机到登陆界面的启动过程(计时2分钟)

    简述: 1.开机BIOS自检 2.MBR引导 3.grub引导菜单 4.加载内核kernel 5.启动init进程 6.读取inittab文件,执行rc.sysinit,rc等脚本 7.启动minge ...

  7. CentOS7 (64位) 下QT5.5 连接MySQL数据库(driver not loaded)

    用qt连接MySQL需要共享库 libqsqlmysql.so的驱动,路径在plugin/sqldrivers目录下,乍看已经可用了,其实不然. 用ldd命令分析一下,libmysqlclient_r ...

  8. [转]ORA-01034: ORACLE not available如何解决

    本文转自:http://www.cnblogs.com/zhwl/p/3726003.html 一个小小的问题,让我折腾了一个上午,下午三点彻底解决了,分享一个给大家解决方法,尽管在测试服务器上,但是 ...

  9. 使用jMeter测试Solr服务接口

    之前一直用ab做简单的服务接口测试,ab功能强悍,使用简单,但是没有生成专题图和表格等功能,因此,我们决定使用jmeter来作为我们测试工具.接下来,我们将详细介绍jmeter使用的步骤,主要包括:j ...

  10. Nodejs 请求转发代理

    var sendPromise = function (res, callback) { var options = { hostname: settings.Ip, port: settings.P ...