关于React
-
React 是一个用于构建用户界面的 JAVASCRIPT 库。
-
React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
-
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
-
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
-
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了
什么是react
React是Facebook出的一款针对view视图层的library(库),主要使用单项数据流的方式进行数据展示
为什么要用
-
使用组件化开发方式,符合现代Web开发的趋势
-
技术成熟,社区完善,配件齐全,适用于大型Web项目(生态系统健全)
-
是由Facebook专门的团队维护,技术支持可靠
-
使用方式简单,性能高,支持服务端渲染
-
从技术角度,可以满足好奇心,提高技术水平;从职业角度,有利于求职和晋升,有利于参与潜力大的项目
特点
- 声明式设计 −React采用声明范式,可以轻松描述应用
- 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
- 灵活 −React可以与已知的库或框架很好地配合
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它
- 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中
- 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
环境搭建
建立一个项目的目录,在目录中 npm init -y 会在目录中产生一个文件package.json
npm i react --save (或yarn add react)会在目录中有一个node_modules目录,找到react-is@16.12.0@react-is目录,找到这个目录下的umd目录,拷贝react-is.development.js到自己的js目录下
npm i react-dom --save(或yarn add react-dom)在node_modules目录下找到_react-dom@16.12.0@react-dom目录,在这个目录下找到umd目录,在_react-dom@16.12.0@react-dom/umd目录下找到react-dom.development.js文件拷贝到自己的js目录下
npm i babel-standalone --save(或yarn add babel-standaloe)在node_odules目录下找到_babel-standalone@6.26.0@babel-standalone目录拷贝这个目录下的babel.js到js目录下
这样react环境就搭建成功了
工程目录
yarn.lock: 项目的安装包、版本号(不要动)
README.md:项目的说明文件(可以通过markdown的语法写一些自己的内容介绍)
package.json:node的包文件(项目的介绍、一些安装的包,也不用动!)
.gitignore:使用git管理代码的时候,如果有些文件不想传到git仓库里的时候,可以把那些文件定义在gitignore里面。
node_modules:依赖包、第三方模块
Public文件夹下:
favicon.ico;网址图标
(主要)index.html:html模板
mainifest.json:当用户访问一次,再去访问时在本地就会有一个缓存,即使没用网络也会当成一个app来使用。(文件中可定义图标、跳转到的地址、样式)
SRC文件夹下:
(主要)index.js:程序入口文件
(主要)App.js:页面的内容文件
App.test.js:自动化测试文件
推荐一些关于react的网站
各个网站:英语好的话,个人推荐去官网。
官网地址:https://reactjs.org/
阮一峰的文档:react的入门,webpack的入门,react-router