前端大牛进阶---React必会教程
一、背景介绍
01
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
二、环境配置
02
(一)安装Node.js、npm、cnpm
当我们在官网下载并安装Node时,npm也自动安装好了,一路next后即可。安装好后键入node -v 以及npm -v 来测试是否安装成功(不需要自己手动配置系统环境变量)
因为国内使用npm很慢,我们可以使用淘宝的cnpm,同时设置镜像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功后,可以键入cnpm -v检查是否安装成功
(二)创建我们的第一个react程序
例如我们要在D:\workSpace下创建first-react-demo这个工程,并跑通,我们依次执行如下步骤
window下进入D:\workSpace这个文件夹,在地址栏键入cmd enter,
cnpm install -g create-react-app全局安装创建react-app的module(这一步不一定要在workspace目录下)
create-react-app first-react-demo 在workspct这个文件夹下创建fist-react-demo这个项目
但是,有可能会报错 Unexpected end of JSON input while parsing near '....0","dependencies":{"' ,假如报错,需要执行npm cache clean –force
在创建成功的基础上,我们在打开first-react-demo这个文件夹,地址栏键入cmd并enter,在打开的cmd窗口中,键入npm start
大功告成。浏览器键入localhost:3000即可访问
三、关于样式
03常用:
-
css
-
less, cra 默认不支持 less.
-
sass/scss, cra 默认支持 sass, 只需要装一下 node-sass 工具.
-
在 rca 中支持 普通样式( 默认 ) 和 模块化样式
-
rac 中的 sass 也是支持者两种语法的
-
如果后缀名是 .module.sass/scss 那么就会使用 模块化的方式来加载
-
如果后缀名只有 .sass/scss 那么就会当做普通的样式来加载
四、其他设置
04
-
homepage 用来控制 buil 得到资源的路径
-
proxy 用来配置代理
-
在解包的 配置文件中找到 一些目录的修改
-
在不解包的情况下如何配置 webpack
-
使用一个新包 react-app-rewired 代替 react-scripts 即可
五、福利时间
05
相关知识点:
-
React不是一个MVC框架,它是构建易于可重复调用的web组件,侧重于UI, 也就是view层
-
其次React是单向的从数据到视图的渲染,非双向数据绑定
-
不直接操作DOM对象,而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。
-
不便于直接操作DOM,大多数时间只是对 virtual DOM 进行编程
- 点赞
- 收藏
- 分享
- 文章举报
- 2015年最热门前端框架React 入门实例教程
- 大前端全套完整教程106G 爱前端-邵山欢课程 node+angular+vue+react+webapp 高级部分
- 前端Vue/Angular/React实战视频教程合集
- 饿了么大前端 Node.js 进阶教程
- 2018年前端进阶响应式开发与常用框架视频教程
- 前端系统学习快速进阶教程全攻略
- 前端系统学习快速进阶教程全攻略
- 原创:React深入浅出(好房前端开发教程手册)1:开篇
- 前端框架React Js入门教程【精】
- 前端--React之webpack使用教程
- 2015年最热门前端框架React 入门实例教程
- 2019最新某Web前端开发Jquery高级进阶及移动端开发教程
- 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。
- 2019年最新某前端进阶响应式开发与常用框架教程
- 【前端,干货】react and redux教程学习实践(二)。
- 前端开发高级进阶深入讲解React源码
- web前端进阶教程目录
- 点赞和吐糟Adblock Plus~进阶教程
- github上最全的资源教程-前端涉及的所有知识体系