chenlupeng007 / react-universal

React-Universal starter with Ant Design

React-Universal

React SSR starter with Ant Design and Koa2.

Update Time: 2019.2

Dependencies

• Webpack 4.x
• Babel 7.x
• React 16.x
• React-router-dom 4.x/React-router-config
• Redux 4.x/Redux-thunk
• Ant Design 3.x
• React Hot Loader 4.x
• Koa-webpack 5.x
• Koa 2.x

Features

• written using ES6, both client and server side.
• SCSS and CSS in modules
• Ant Design(you had to import css files on your own)
• HMR(client&server)

Requirement

• System: Unix Like
• Node 10+
• Yarn 1.3

Begin

$ git clone https://github.com/chenlupeng007/React-Universal.git
$ cd React-Universal
$ yarn

After Installation

yout had better change the line

const hotClient = await getClient(compiler, options);

in koa-webpack/lib/index.js to

const hotClient = await getClient(compiler.compilers.find(compiler => compiler.name === 'client'), options);

Development

$ yarn start

Production

$ yarn start-prod

How to write your own components

1. dumb component: A, export withStyles(A, styles)
2. Container: write static function: loadData, export connect(mapStateToProps, mapDispatchToProps)(Container)
3. config rotues in src/common/routes
4. config reducers in src/common/reducers/

Warning

Don't remove the folder src/client/components/Empty

react-universal's Issues

一些建议

• 你这里涉及了前后端，为什么不采用 monorepo 的方式呢？ 建议看看 yarn workspace 和 lerna。至于一起启动前后端，我在根下的 package.json 的 script 字段加了句 "start": "lerna run --parallel start"。它会调用各个包的 start 脚本。
• redux 不太适合大部分项目，一般的项目使用新出的 hooks 就好了，简单省心
• 不建议写太多的 webpack 配置，自己维护升级还是挺累的。如果想自己维护的话，仿照 create-react-app 这个项目，单独开一个项目，写一个第三方的 react-scripts，配合上文档。
• withStyles 这种 hoc 现在也不常用了，我和我的朋友一般使用 https://next.material-ui.com/css-in-js/basics/#hook-api
• 如果能加上部署脚本就更好了。可以考虑的部署target的有 https://zeit.co/now ， https://www.netlify.com/ ，还有 https://firebase.google.com/ 等。其中 netlify 支持 aws lambda，是一个很便宜的，而且免费额度很高的托管的后端服务。
• 如果还想更进一步就搞一搞 lint， typescript，还有测试