react使用入门＋介绍

最新推荐文章于 2022-03-17 08:48:33 发布

我心中的妖怪长大了

最新推荐文章于 2022-03-17 08:48:33 发布

阅读量157

点赞数

文章标签： react

本文链接：https://blog.csdn.net/weixin_42786389/article/details/104487081

版权

关于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：自动化测试文件