项目文件:
– 项目开始:https://github.com/blwoosky/React-Redux-WP-Theme-Starter
– 项目结束:https://github.com/blwoosky/BlwooSky-Theme-v2.1
适合人群:
– 了解Javascript
– 了解HTML、CSS
– 了解Wordpress
你可以学到:
- React : 创建React组件、React组件的嵌套、React组件的状态管理以及React组件的数据传递等等。
- Redux : 使用Redux来将我们SPA应用的数据状态进行有效的管理。
- React Router : 使用React Router来管理SPA应用的路由。
- WebPack : 用WebPack这个打包工具来处理JS、样式、图片等文件,并使用WebPackDevServer来建立一个高效的开发环境。
- Babel : 使用Babel来将我们编写的ES6、React编译转换成浏览器可以认识的ES5语法。
- ES6 : 紧跟前端的发展脚步,完全使用新的ES6语法来进行开发。无需担心兼容性问题,因为我们有像Babel这样的工具来对它进行编译。
- WordPress主题 : 使用WP REST API配合React来开发一个全站Ajax的WordPress主题
如果用一张图来展示上面所说的这些:
另外,你还可以学到:
- 思考问题的方式 : 课程中,我将针对项目进行的一些需求的分析、确定和完成,整个过程会一一向你展示。
- 解决问题的方法 : 当然,在视频教程当中我也会遇到一些奇奇怪怪的问题,但我会向大家展示我是如何有效的来解决这些问题,来给大家提供一些在工作上的参考与帮助。
- 学习的方法 : 当今的前端技术发展(其实不只是前端技术)飞快,那些各种各样,五花八门的新技术层出不穷!所以,我会在视频里无形之中向大家展示我是如何学习的,我觉得这个无比重要!
老师,项目下载下来npm install之后再npm start运行报错,怎么解决呢
blue老师,主题开发环境这一章,我用npm install后报这个错误是什么情况啊
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\ch
okidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.0.15: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win32″,”arch”:”ia32
“})
npm WARN BlwooSky-Theme-v2.1@0.0.1 No repository field.
然后我忽略这个,直接npm start也是会报错
ERROR in .//src/index.js
Module parse failed: D:\WWW\wp-content\themes\v2.1/\src\index.js Unexpected toke
n (14:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (14:4)
下面是报错截图
http://aitx.me/usage/npm_install_err.png
http://aitx.me/usage/npm_start_err.png
install没过,start自然也会报错。
查了下是那个fsevents应该是mac的兼容包,没多大问题
确认一下你的node版本装的对不对,装的是windows32位的吗?
node版本是6.9.1,win732位的
找到原因了,将webpack.config中的babelloader修改
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react', 'stage-2']
}
}
你好,想问一下在您的15课时中用来复制粘贴的那个静态html页面在哪个位置呢。
那个没有共享,你随便写一个静态文件即可。
直接
“scripts”: {
“start”: “webpack && webpack-dev-server –hot –inline”
} 这样不会报错 写在命令行会保存
但是依然无法实现热加载
检查一下你开发环境中文件里的引用关系对不对。
老大 用webpack实现热加载的时候。webpack && webpack-dev-server –hot –inline 这行命令行会报错 说&&符号不支持此版本。 然后我在package.json 添加了script内容
“scripts”: {
“webpack1”: “webpack –port 3003 &”,
“server”: “webpack-dev-server –hot –inline &”,
“start”: “npm run webpack1 && npm run server”
}
然后 npm start 但是还是实现不了热加载。怎么办呢
React-Redux-WP-Theme-Starter
项目npm install之后 npm start老是报这个错误。求指教
ERROR in .//src/index.js
Module parse failed: E:\Program Files\nodejs\learn-react\react15\examples\v2.1/\src\index.js Unexpected token (14:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (14:4)
at Parser.pp$4.raise (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:2221:15)
错误提示是缺少loader,你把npm安装源切换成淘宝的,然后把node_modules文件夹删掉,再重新 npm install一下试试。
还是一样的错误。我用的是淘宝的镜像了在npmrc文件添加registry=https://registry.npm.taobao.org
在粘贴一下npm install的时候最后的警告
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN BlwooSky-Theme-v2.1@0.0.1 No repository field.
你不是用 nrm 切换的吗?
其实不是用你看到的 acorn 来进行解析JS的,这东西应该是babel的一个依赖模块。你用nrm切换了再试试。
有办法不使用acorn解析javascript吗
ERROR in .//src/index.js
Module parse failed: E:\Program Files\nodejs\learn-react\react15\examples\v2.1/\src\index.js Unexpected token (14:4)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (14:4)
at Parser.pp$4.raise (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:2221:15)
at Parser.pp.unexpected (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:603:10)
at Parser.pp$3.parseExprAtom (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1822:12)
at Parser.pp$3.parseExprSubscripts (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1715:21)
at Parser.pp$3.parseMaybeUnary (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1692:19)
at Parser.pp$3.parseExprOps (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1597:21)
at Parser.pp$3.parseExprList (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:2165:22)
at Parser.pp$3.parseSubscripts (E:\Program Files\nodejs\learn-react\react15\examples\v2.1\node_modules\acorn\dist\acorn.js:1741:35)
切换npm nrm use taobao
还是一样的错误。
可能是我系统问题吧。win10
一不小心手抖了。。。没有源文件吗?
有啊,GitHub上面就是啊,简介里你仔细看下哦。
您好,确认了同样的操作,在Macbookpro上 npm start 是可以的,在Win7上输入npm start就会报array说的“You may need an appropriate loader to handle this file type.”的错误。
之前我的记录,
我发现了和array这个朋友一样的问题,我的是windows7的系统,也切换源nrm use taobao,但是问题依旧,我现在用苹果macbookpro再测试下,有结果我随时回复。
你好,我也是这个问题,请问你解决了吗
我也是win7 直接github下载下来 使用淘宝镜像cnpm install 安装插件,运行之后也是这种情况?请问能解决吗?
相对路径问题影响,把src相对路径改成path.resolve(__dirname,’src’)再执行就可以了
为啥可以是o.O
你猜~
我猜了一天也没猜到,不是男神能否告知。。。。。。
预览
wp环境我自己装一个就行吗?
你说的应该是WP运行环境,如果是MAC推荐使用Mamp,如果是windows推荐使用wamp server,你可以看一下这套课程 http://digcss.com/courses/wordpress-theme-maker/
在学习redux之前我得先学会wp的主题吗?
不用,但是要稍作了解,你就看看那个课程里面wp环境怎么装的就可以了
chrome Redux dev tool 安装了提示没有store, 是需要我在代码里加入什么东西吗?
不好意思,我没用过你说的 chrome Redux dev tool
我想写一个react loading的组件, 我要怎么控制那个loading的显示隐藏?在react中有没有类似于angular的ng-if / ng-show之类的东西?
你可以单独写一个属性来控制组件loading的状态,例如每个组件都有一个
isLoading
属性为true
或者false
hello, blwoosky! 我在写一个modal的组件, 用上个问题的那种方式来关闭和显示modal对话框的显示, 我把那个标记放在父组件的state里面了, 不知道这样做是否合理? 我在这个modal组件点击关闭的时候是通过执行props传递的一个回调函数, 这个回调函数用来改变父组件的state标记用来关闭modal对话框, 这样的做法是正确的吗?如果不是的话我应该怎么样做更合理?
你所说的父组件指的是谁?这个state就直接加给modal组件就行了,组件就是要重复利用,每个组件都有自己的state,这样你就能分别控制它们啊。
就是我调用这个modal组件的地方, 你说的这个用来标记modal窗口显示与否的state加在modal组件上怎么操作?
就给modal组件加一个state属性就可以了啊~
跟着视频走webpack报错
ERROR in multi main
Module not found: Error: Cannot resolve module ‘webpack/hot/dev-server’ in xxx/2_webpack
@ multi main
只有这么点错误信息吗?我猜测是你的npm包没有安装完整,如果你安装npm包太慢的话,尝试使用
nrm
把npm源切换成淘宝的试下。第十个视频中 提到的 blwoosky.local 内容 去哪里下载
那个内容是我自己的博客哦,你需要自己安装自己的wordpress哦,如果不知道怎么安装,可以看这个课程:http://digcss.com/courses/wordpress-theme-maker/
哦,原来如此啊