React起源和特点及其使用方法(手动安装和脚手架工具使用)
1.react的起源及其思想(简单概述)
- facebook内部的一个xhp项目，在页面上提交一个请求，由后台计算好数据以及新页面的结构返回给前端。
- 这种方式没有异步ajax更新页面，新页面完全从后台返回，这样页面的状态就清晰，但是问题是没有异步更新，全部是后台返回这种方案用户体验非常不好
- 所以是否能在前端有这么一个框架，帮我们去计算到底应该更新哪些dom节点，所以产生了react项目，产生虚拟dom的思路，在数据更新前后比对更新前后的虚拟dom，找到其中变化的节点，将这些节点更新到真实的dom中。
- 在react中，视图就是数据的一种映射 ui(视图) = React(state数据)，视图是react组件根据数据渲染而成，所以在组件（渲染规则）没有问题的情况下，如果视图出现错误，那么就是数据出了错误。这样问题的追逐变得相当清晰。
- 所以函数组件就是这种思路的最纯粹的体现。但是计算机中很多状态都需要变量去描述，所以使用有状态组件来做这部分事情
- 在实际的实践中，划分组件：smart component (智能组件/状态组件) + dumb component （笨拙组件/渲染组件）
2.react的特点
1.声明式:只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI
2.基于组件:组件时React最重要的内容,组件表示页面中的部分内容
3.学习一次随处使用,使用React可以开发Web应用,使用React可以开发移动端,卡已开发VR应用
3.React基本使用
3.1.react安装
3.11.手动安装依赖包启动react项目
-
初始化一个项目 在新建的项目文件夹下执行
npm init -y生成项目依赖包管理文件package.json -
安装react react-dom 在项目根目录下执行
npm i react react-dom -
在项目根目录下新建index.html文件
<body> <div id="root"></div> <!-- 1.引入js文件 --> <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> <script> /* 2.创建react元素 参数1.元素名称 参数2.元素属性 第三个及其以后的参数:元素的子节点 */ const title = React.createElement('h1',null,'Hello,React') //3.渲染react元素 //参数1.要渲染的react元素 //参数2.挂载点 ReactDOM.render(title,document.getElementById('root')) </script> </body>
3.12.使用脚手架工具生成react项目
1.脚手架的意义
1.脚手架是开发现在Web应用的必备;
2.充分利用Webpack,Babel,ESLint等工具辅助项目开发;
3.零配置,无需手动配置繁琐的工具即可使用;
4.关注业务,而不是工具配置;
2.使用react初始化项目
- 初始化项目，命令：npx create-react-app 项目名称
- 启动项目，在项目根目录执行命令：npm start
3.简单使用
//导入react和react-dom两个包
import React from 'react'
import ReactDOM from 'react-dom'
//创建元素
let title = React.createElement('h1',null,'我是标题')
//渲染到页面
ReactDOM.render(title,document.getElementById('root'))
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
