为了账号安全,请及时绑定邮箱和手机立即绑定

React实战--打造画廊应用(上)

  • scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。 clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。 offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
    查看全部
  • 图片分布
    查看全部
  • ·提交代码懂啊github上 1、git status //查看当前git项目的一个状态 2、git add-A //将所有为track的文件一次性添加进来 3、git commit -m "提交说明" //提交代码并说明 4、git push //将所有代码push到gitHub上
    查看全部
    1 采集 收起 来源:舞台构建

    2018-03-22

  • ·加载imageDatas.json的loader 1、npm install json-loader --save-dev 2、在crg的default.js中配置json-loader的匹配正则 { test:/\.json$/, loader:‘json-loader’ } 3、在Main.js文件中引入 requires('../data/imageDatas.json') 4、处理一下imageDatas,将图片的文件名转换为真实有效的图片地址 生成genImageURL函数。。。
    查看全部
    1 采集 收起 来源:舞台构建

    2017-04-06

  • ·webpack的配置: 1、autoprefixer-loader用来处理css文件,自动为其中的css规则添加前缀的工具 nmp install autoprefixer-loader --save-dev、 2、为crg文件夹中的default.js配置scss的信息 !autoprefixer-loader?{browser:["last 2 version"]}!
    查看全部
    0 采集 收起 来源:舞台构建

    2018-03-22

  • 一、项目搭建之前,要进行的环境搭建,见(慕课网:ReactLative基础与入门 1-3开发环境搭建-mac平台) 二、yeoman 1、现代web app开发,著名的脚手架工具yeoman,在web项目立项的阶段,用yeoman生成项目文件、代码结构。yeoman自动将最佳实践和工具整合进来,大大加速和方便了我们后续的开发。 2、安装: 见慕课网课程:GRUNT Beginner前端自动化工具 2-2 yeoman,bower,grunt 简介及安装。 三、1、grunt被gulp威胁,然后webpack又威胁了gulp和browerify.(aSuncat:天道好轮回,苍天绕过谁。前端就只有不断地学学学,这样才能提高效率。学就学,老娘无所畏惧。) 四、webpack: 1、安装 终端输入:npm install -g generator-react-webpack 2、查看本地的版本: 终端输入:npm ls -g --depth=1 2>/dev/null | grep generator- (1)npm ls -g :列出全局安装的所有npm包 (2)--depth=1:树状结构最多向下展示一层 (3)2>/dev/null: 如果执行npm ls -g的过程中,有错误消息,把错误消息重定向到我们的空设备文件上 >表示重定向 1表示standard out标准输出 2表示standard error 标准错误 /dev/null表示空设备文件 (4)|表示通道,用来将上一个命令的输出内容作为下一个命令的输入内容 (5)grep generator-:在前面的输出结果中,检索generator开头的关键字内容。 3、新建的项目拉到本地 (1)进入workspace,终端输入:git clone +项目地址 (2)进入项目目录:cd gallery-by-react(项目名称) (3)终端输入:yo react-webpack gallery-by-react (4)提示是否需要react-router(y/n),因为这里是单页面程序,不需要路由,所以选n (5)选sass (6)终端输入:grunt-serve,让我们的站点跑起来
    查看全部
    1 采集 收起 来源:项目生成

    2018-03-22

  • 查看安装内容
    查看全部
    0 采集 收起 来源:项目生成

    2017-04-06

  • 关于generator-react-webpack2.0版,目录结构大变样,已经是只需要webpack就能启动项目,我理了一下其目录。 |____.babelrc ES6配置文件 |____.editorconfig EditorConfig插件配置文件,用于统一编码风格。 |____.eslintrc ESLint配置文件 |____.gitignore 需要git同步时忽略文件夹的配置文件 |____.yo-rc.json 未知 |____cfg 这里存放webpack配置 | |____base.js webpack基础配置 | |____defaults.js webpack一些其他的默认配置 | |____dev.js 测试环境的webpack配置,启动npm run start的时候会使用这份webpack设置。 | |____dist.js 线上环境的webpack配置,启动npm run dist的时候会使用。 | |____test.js 做单元测试的时候使用,npm run test |____dist webpack输出目录 | |____README.md | |____static | | |____favicon.ico | | |____README.md |____karma.conf.js 单元测试配置文件 |____npm-debug.log 日志文件 |____package.json 重要!包结构配置文件,并且存放了启动脚本,npm script |____server.js node服务器,用于本地启动这个项目,正是这个脚本启动了webpack编译。 |____src 源代码目录 |____test 单元测试目录 |____webpack.config.js 重要,webpack配置文件入口
    查看全部
    4 采集 收起 来源:webpack(一)

    2017-04-06

  • generator-react-webpack 安装
    查看全部
    0 采集 收起 来源:项目生成

    2017-04-06

  • 选择包
    查看全部
    0 采集 收起 来源:项目生成

    2017-04-06

  • 检测yo版本
    查看全部
    0 采集 收起 来源:项目生成

    2017-04-06

  • 安装yo
    查看全部
    0 采集 收起 来源:项目生成

    2017-04-06

  • 提交代码到GitHub上 1、git status //查看当前git项目的一个状态 2、git add -A //将所有未track的文件一次性添加进来 3、git commit -m "提交说明" // 提交代码并说明 4、git push /将所有代码push到gitHub上。
    查看全部
    0 采集 收起 来源:舞台构建

    2018-03-22

  • 1. yeoman网站: http://yeoman.io/generators/ 需要在NODE.JS环境下运行,打开命令行,输入node -v查看node版本 2.npm install -g generator-react-webpack 安装generator 3.npm ls -g --depth=1 2>/dev/null | grep generator- 查看generator版本 3.
    查看全部
    0 采集 收起 来源:项目生成

    2018-03-22

  • 四、chrome应用商店:https://chrome.google.com/webstore,,搜索react developer tool.添加后重启。 通过react选项,可以查看components.
    查看全部
    0 采集 收起 来源:项目生成

    2017-03-29

举报

0/150
提交
取消
课程须知
您要具备以下前导知识: 1、需要有一定的JS基础 2、CSS前端基础 3、React基础知识 4、了解前端自动化的相关知识,Yeoman,Grunt,Sass等。 5、先学习“React入门”课程
老师告诉你能学到什么?
1、2015年最优秀的前端集成解决方案 2、CSS3动画,变形,字体渲染方式等大前端周边扩展知识 3、真实的项目开发流程 4、如何利用好github保存项目,发布web说明站点。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!