非常感谢楼主写的这个教程。
有个地方看不大懂
在src/components/author/index.js
<Route
exact
path={${match.url}}
{/* 这里可以直接用 component={List}，不过我们后面要对这里做一些修改 */}
render={() => }
/>
path={${match.url}} 这个地方 为什么不直接使用match.url 而是使用 ${ match.url }包裹起来。
其中 ${ } 是做什么用的了？
Webpack HMR 需要对指定的模块启用HMR，我的这个写法简单粗暴了一些。可以参考Dan Abramov的这篇文章Hot Reloading in React，或者webpack的文档
Updates to nested components work because of how Webpack HMR API is designed. If a module does not specify how to handle updates to itself, the modules that imported it also get included in the hot update bundle, and the updates “bubble up” until they are all accepted by all the modules importing them. If some of the modules don’t end up being accepted, the hot update fails and a warning is printed. To “accept” a dependency, you just call module.hot.accept(‘./name’, callback) which Webpack parses at compile time.
官方的例子是这样的
if (module.hot) {
module.hot.accept('./components/App', () => {
render(App)
});
}
$ npm install koa koa-router koa-send http-proxy save-dev 此句save丢了个 – ，应该是–save
实际项目中怎么用react？
比如本项目完成后不考虑后台代码部署时前端怎么用？
猜测：
把react react-dom压缩版本和编译后的app.js这三个直接放在index.html就行了吗？
实际项目里面，一般都是html文件是后端模板输出，因为要考虑跨域的问题，所以前端仓库一般没有html文件。
js和css，image这些静态文件都是发布到cdn，所以这个示例里面是把js文件代理到本地文件。正式发布的时候，只发布build下面的文件。
之前在一个项目里面是用一个组件来处理的，大概是这样
，thanks// 这里权限点是一个array，可以后端直接输出到页面上，用一个全局变量存储，也可以异步获取，放在redux里
let privileges = ['aaa','bbb']
function Auth(props) {
// 实际项目里面，props.privilege 也用了一个数组，这里简化一点
const checked = privileges.indexOf(props.privilege) >= 0
if (checked) return props.children
return <noscript />
}
// 使用的时候
<Auth privilege="aaa" ><div>aaa</div></Auth>
<Auth privilege="ccc" ><div>ccc</div></Auth>
还可以做一个高阶组件
let privileges = ['aaa','bbb']
function authHoc(privilege, Component) {
return function(props) {
const checked = privileges.indexOf(privilege) >= 0
if (checked) return <Component {...props} />
return <div>没有访问权限</div>
}
}
需要验证权限的组件
function AAA(props) { ... }
export default authHoc('aaa', AAA)
