React全栈开发框架快速开发 @symph/joy=webpack+babel+redux+MVC+依赖注入+Dva兼容+服务端渲染+插件化配置+优化集成

现代前端应用是一个工程化的系统，和jquery时代有着很大的不同，以前工作中大部分时间都在模板填充、事件绑定、DOM更新等，而现在前端应用和后端工程一样，是一个完整的系统化工程，数据流和控制流如何流转？数据该如何存放？业务方法如何管理？UI组件如何封装和路由？最后还有编译打包，优化等问题。幸运的是已有各种工具帮我们解决了绝大部分的问题，可如何将这些工具库组合在一起形成一个可用的应用，并不是一件简单的事情，例如我们需要大量的配置来使webpack和babel按照要求工作。

那如何能快速的启动工作呢？选择一个前端框架定会事半功倍，例如最常用的react-create-app、next.js和dva-cli等，都只需要简单的几步操作就可以开始进行业务开发了。如果你还没有听说过它们或者类似的框架，相信你现在正在被各种配置文件、应用结构、多人协同开发效率等问题感到困惑。这里介绍的是另外一个前端框架@symph/joy，它结合了next.js和dva的特点，是一个全栈型的框架(因为不同项目对UI的要求差异较大，所以未集成UI组件)，只要你会js+react就可以开发高质量的前端应用。

react-create-app是一个比较基础的脚手架，很多东西还得开发者自己搭建，并不建议在实际工程中直接使用。

也许你现在对webpack、babel、redux还完全不了解，没关系，我们依然可以开始工作，因为这些底层技术@symph/joy已经为你准备好了，等你以后想深入定制开发，也可以轻松升级定制它们，下面开始写第一个页面。

创建项目目录

运行npm init创建一个空工程，并填写项目的基本信息，当然也可以在一个已有的项目中直接安装。

npm install --save @symph/joy react react-dom

添加NPM脚本到package.json文件：

{
   
   
  "name": "hello-word",
  "version": "1.0.0",
  "scripts": {
   
   
    "dev": "joy"
  }
}

编写第一个页面

1. 写代码

创建./src/index.js文件，并插入以下页面代码：

import React, {
   
    Component } from 'react'

export default class Index extends Component {
   
   
  render () {
   
   
    return (<div>
      <div>Welcome to @symph/joy!</div>
    </div>)
  }
}

2. 运行

最后运行yarn run dev命令，在浏览器中输入访问地址http://localhost:3000

3. 做了什么

到此处，我们拥有了哪些呢？

• 应用入口（./src/index.js），一切都从这里开始，以后可以逐步实现更多功能
• 启动了一个开发服务器，支持服务端渲染和请求代理
• 一个零配置的webpack+babel编译器，确保代码在服务端和浏览器上正确运行
• ES6、7、8等高级语法支持，如：class、async、@注解、{...}解构等
• 热更新，调试模式下，在浏览器不刷新的情况下，使更改立即生效
• 静态资源服务，在/static/目录下的静态资源，可通过http://localhost:3000/static/访问
• 支持静态版本导出，可部署到静态服务上，比如Nginx和CDN上

使用样式

jsx内建样式

内建了 styled-jsx 模块，支持Component内独立域的CSS样式，不会和其他组件的同名样式冲突。

// src/hello.js
import React, {
   
    Component } from 'react'

export default class Hello extends Component {
   
   
  render () {
   
   
    return (<div>
       <div className="message">Welcome to @symph/joy!</div>
       <style jsx>{
   
   `
	     .message {
           color: blue;
         }
       `}</style>
       <st