React实战--打造画廊应用（上）_技术问答

首页免费课 React实战--打造画廊应用（上）问答

React实战--打造画廊应用（上）

                
                Materliu
            Web前端工程师

                    查看讲师更多课程 
                    Materliu讲师的其他课程
                
Sass和Compass必备技能之Compass
中级·21217
免费课程
                                
Sass和Compass必备技能之Sass篇
中级·29321
免费课程
                                
Grunt-beginner前端自动化工具
高级·60388
免费课程
                                
                难度高级
            
                时长 2小时 4分
            
                学习人数
            
综合评分9.37
                            67人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.3
                                简洁易懂
                            
                                9.2
                                逻辑清晰

全部评论问答未解决精华

em_heqian

先看有点迷惑再看一遍才发现所有图片都是以右上角的坐标来定位的所以都要减去图片的宽度

0 3-3 图片组件构建(二)

2017-12-17

web阿周

grep是Linux系统下的查找命令, 换成findstr试试, 我的加上2>/dev/null就显示系统找不到指定路径,删掉就能显示react-webpack的版本号了, 也就是命令行输入 npm ls -g --depth=1 | findstr generator. 然后我的电脑里全局generator好像只有一个generator-react-webpack@1.2.11, 其他的都没装,所以只列出了一个

1 2-1 项目生成

2017-12-09

努力奋斗的小黄人

https://github.com/wjma110/gallery-by-react，跟着老师的讲解一步一步坐下来的，github上也有一些我调试中遇到的问题，欢迎大家交流学习。

2017-11-28

lintaososo

postcss.config.js的内容
module.exports = {
parser: 'postcss-less', //限制语法结构，这里采用LESS
plugins: {
'postcss-import': {},

'autoprefixer':{ //自动加浏览器前缀的插件
browers: ['last 5 versions','ie >= 12']
},
'cssnano': {} // 必须把这个放在下面，是压缩css的插件
}
}

0 2-2 webpack（一）

2017-11-28

lintaososo

2017年11月的react-webpack 生成的项目加入postcss的方法：
1. 首先安装一堆包 postcss-less、postcss-loader、postcss-import、cssnano、autoprefixer
2. 在需要编译css的目录创建配置文件 postcss.config.js
3. 然后！配置loader！在default.js里面
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader'

1 2-2 webpack（一）

2017-11-28

小隐山外人

胸大的帮我一下

1 2-1 项目生成

2017-11-28

lintaososo

是呀~好多都变得不一样了~命令中指定了less 但是在项目中却没找到

0 2-2 webpack（一）

2017-11-26

幕布斯1467664

老师源码:https://github.com/materliu/gallery-by-react

1 3-1 舞台构建

2017-11-24

不是肥花

向下取整可以使用 `~~(Math.random() * MaxNumber)` 的方法。

0 3-4 图片组件构建(三)

2017-11-24

冷月诗魂

大家可以去看比较新的课程，《使用React构建一款音乐播放器》，也是慕课网的

2 1-1 react实践介绍

2017-11-22

哈敏恩

refs到的组件<ImgFigure/>只有几个属性，要接着refs到下面真实的DOM节点，才有scrollWidth等一大堆属性

0 3-4 图片组件构建(三)

2017-11-21

冷月诗魂

劝大家现在这一章节随便找个图片取名1.jpg放入images文件夹下，把后面的图片名也都改成1.jpg，这样就能防止后面因为查询不到而报错。

1 3-1 舞台构建

2017-11-21

冷月诗魂

新版本default.js文件老师加的这句
{
test: /\.json$/,
loader: 'json-loader'
},
就是可以不用再在新版本Main.js里老师写的var imageDatas = require('../data/imageDatas.json');这句不用加json!，也就是var imageDatas = require('json!../data/imageDatas.json');;这两种方法都能运行。

2 3-2 图片组件构建(一)

2017-11-21

冷月诗魂

其实大家仔细看还是有迹可循的，就是文件位置变化，名字变了下，理论上能领悟就能做到了，现在版本的像这些js文件都被放在node_modles里，webpack对应webpack.js、webpack-dev-server对应Server.js(大写的S)。
我用的是webstorm编辑器，先在主目录下找到server.js(小写s)，进去后最上面几行按（ctrl+鼠标左键）就可以跳转了；

2 2-2 webpack（一）

2017-11-20

冷月诗魂

先帮大家把后面的坑踩掉！运行的grunt build是之前版本的，分别对应现在的：
npm run clean
npm run copy
npm run dist
这几个命令可以去看package.json文件，还有很多；
至于启动服务，则是变成：npm run serve 或者 npm start;
另外，劝大家最好换成淘宝的cnpm，npm有时候是真的慢，等得想死的心都有了！！
淘宝镜像资源： npm config set registry https://registry.npm.taobao.org
检测是否安装成功：npm config get registry

4 2-1 项目生成

2017-11-20

首页上一页 1 2 3 4 5 6 7 下一页尾页

该课程已下架

课程须知: 您要具备以下前导知识： 1、需要有一定的JS基础 2、CSS前端基础 3、React基础知识 4、了解前端自动化的相关知识，Yeoman，Grunt，Sass等。 5、先学习“React入门”课程

老师告诉你能学到什么？: 1、2015年最优秀的前端集成解决方案 2、CSS3动画，变形，字体渲染方式等大前端周边扩展知识 3、真实的项目开发流程 4、如何利用好github保存项目，发布web说明站点。

微信扫码，参与3人拼团

热搜

最近搜索清空

React实战--打造画廊应用（上）