一．初识react [逆战(●’◡’●)]

React的官网：https://reactjs.org/

1. react的定义

react是用于构建用户界面的javascript库
相当于mvc的view层
但仍然是数据驱动，数据更新，视图也会改变

2. react的起源

（1） react是由facebook团队开发
（2）在国际使用较广
（3）文档地址:
中文文档：https://react.docschina.org/
GitHub地址：https://github.com/facebook/react/
1.

3. react的特点

（1）声明式
（2）组件化：
由组件构成复杂的界面，通过js编写的组件可以更好的传递数据，将应用状态和DOM拆分开来
（3）一次学习，随处编写

二． React环境搭建

1．使用方式

（1）第一种：使用script引入相关的js文件
（2）第二种：使用react的脚手架

2．通过script引入相关js搭建react环境

第一步安装：

○1初始化：npm init –y
○2.安装核心包：npm I react或yarn add react
○3.安装react用于web开发的包：npm i react-dom或yarn add reeact-dom
○4.es5转es6，解析jsx的包：npm i babel-standalone

2. 第二步，引入其中所需要的js文件

○1.项目下建一个js文件夹
○2.找到node_modules下的三个js文件：
react文件夹下的umd下的react.development.js
react-dom文件夹下umd下的react-dom.development.js
babel-standalone文件夹下umd下的babel.js
○3.将这三个js文件复制进自己建立的js文件夹
○4.html引入这三个js文件，就搭建好react环境了

3. 第三步，script标签必须为 type=“text/babel”

<script type="text/babel"> </script>

4. 一个基本的react实例

<!DOCTYPE html>
2)  <html lang="en">
3)  <head>
4)    <meta charset="UTF-8">
5)    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6)    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7)    <title>Document</title>
8)    <script src="./js/react.development.js"></script>
9)    <script src="./js/react-dom.development.js"></script>
10)   <script src="./js/babel.js"></script>
11) </head>
12)
13) <body>
14)   <div id="box"></div>
15)   <script type="text/babel">
16)     console.log(ReactDOM);
17)     var a = <h2>hello world</h2>
18)     ReactDOM.render(a,
19)       document.getElementById("box"))
20)   </script>
21) </body>
22)
23) </html>

5. 实例分析说明：

○1 ReactDOM.render()方法用于将组件挂载到DOM节点上
○2. ReactDOM.render()接受两个参数
参数1：要挂载的内容（即template模板）
参数2：要挂载的节点
○3.对于挂载内容，同vue一样，最外层只能有一个标签
○4.html+js的写法，我们称之为jsx语法，前提是script标签的type值为text/babel

3．通过脚手架搭建react环境

使用的是webpack

第一步安装：
○1全局安装脚手架：npm i –g create-react-app
○2.查看版本号：create-react-app –version
创建一个项目：
create-react-app 项目名
启动一个项目：
yarn start或者npm run start

三． React的jsx语法

记住jsx语法必须是script标签的type值为text/babel

1. 什么是jsx？

Html/xml+js混写的写法我们称之为jsx语法
是javascript的扩展
是一种语法糖
可以作为单独的js文件

2. Jsx语法

（1） Jsx中所有的js表达式写在{}中

可以写表达式，但是不能写语句和流程控制
不能同时写多个字段数据
○1可以直接渲染数字和字符串
○2.数组直接渲染，转成字符串拼接
○3.函数渲染的是其返回值，可以渲染函数调用后的结果{a()}
○4.不能直接渲染对象！但是可以渲染对象里的内容obj.key

（2） Jsx中写style样式

React推荐内联样式，是使用一个对象来设置内联样式
style={}
○1可以先在外设置一个样式对象，然后给style={styleobj}
○2.直接用键值对形式，记住键值对为js语句，需要用{}包裹style={{key:value,}}

（3） jsx的class要改为className

因为class是关键字

（4）绑定事件，事件名需要首字母大写onXxx={}

（5） for属性需要写成htmlFor

（6）遍历数组时，需要加key属性标识每一个元素标签

可以使用id标识
用index标识，性能会变差，可能引起组件状态的问题，因为数组的删除添加会导致index的变化
通常使用数组的map方法进行映射，返回需要的标签，记得return

（7）遍历对象：先把对象转为数组，再进行遍历

因为jsx不能直接渲染对象
对象转数组的方法
○1Object.keys //返回对象所有的key值组成的数组
○2.Object.values //返回对象所有的value值组成的数组
○3.Object.entries //返回对象所有的键值对组成的数组

项目步骤

npx create-react-app react-app

cnpm run eject 抽离配置文件

依赖cnpm i react-router-dom -S

React 优雅初级入门相关推荐

mui初级入门教程（六）— 模板页面实现原理及多端适配指南
文章来源:小青年原创发布时间:2016-07-26 关键词:mui,webview,template,os,多端适配转载需标注本文原始地址: http://zhaomenghuan.github. ...
React Native小白入门学习路径——五
React Native小白入门学习路径--五序 "哦天呐!" 这句话成了我在实验室的口头禅, 老师可能觉得我们都是大神吧,都还在看着基础就给布置了那么多任务:写一个RN的TDD ...
Jeecg 初级入门
Jeecg 初级入门 1.部署jeecg 1.1.下载jeecg 请在jeecg 发布地址下载jeecg工程 1.2 导入myeclipse8.5 按照如下视图选择jeecg项目存放路径然后导入项目工 ...
【技术培训】招收Jeecg门徒 ---javaweb初级入门班
招收Jeecg门徒[javaweb初级入门班] 最近准备带徒弟,带些人才出来,我带徒弟的理念是实践为王,在实践中掌握原理,积累经验. 我带徒弟的方向是JAVA WEB,掌握各种主流框架.(后期会开展j ...
Linux初级入门（第一次作业）
Linux初级入门在本科期间学过一些Linux的简单命令,再次接触Linux不仅巩固了知识还学习到了很多新的东西. 什么是操作系统? 操作系统,英文名称Operating System,简称OS,是 ...
转: React系统的入门系统
评注:React系统的入门系统. 转: http://www.infoq.com/cn/search.action?queryString=%E6%B7%B1%E5%85%A5%E6%B5%85%E ...
Spring Boot (16)---优雅的入门篇
Spring Boot (16)---优雅的入门篇 Spring一直是很火的一个开源框架,在过去的一段时间里,Spring Boot在社区中热度一直很高,所以决定花时间来了解和学习,为自己做技术储备. ...
【吴刚】电商网站详情页设计初级入门标准视频教程-吴刚-专题视频课程
[吴刚]电商网站详情页设计初级入门标准视频教程-325人已学习课程介绍本套教程在学员有PS软件基础及对网页元素制作有了解的基础上,循序渐进,深入浅出,全篇干货,系统化的讲解电商网站 ...
uni-app项目开发-----初级入门教程（从0到1制作打包自己的app）
uni-app项目开发-----初级入门教程(从0到1制作打包自己的app) uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程 ...

React 优雅初级入门

一．初识react [逆战(●’◡’●)]

React的官网：https://reactjs.org/

1. react的定义

2. react的起源

3. react的特点

二． React环境搭建

1．使用方式

2．通过script引入相关js搭建react环境

第一步安装：

2. 第二步，引入其中所需要的js文件

3. 第三步，script标签必须为 type=“text/babel”

4. 一个基本的react实例

5. 实例分析说明：

3．通过脚手架搭建react环境

使用的是webpack

三． React的jsx语法

1. 什么是jsx？

2. Jsx语法

（1） Jsx中所有的js表达式写在{}中

（2） Jsx中写style样式

（3） jsx的class要改为className

（4）绑定事件，事件名需要首字母大写onXxx={}

（5） for属性需要写成htmlFor

（6）遍历数组时，需要加key属性标识每一个元素标签

（7）遍历对象：先把对象转为数组，再进行遍历

项目步骤

React 优雅初级入门相关推荐

最新文章

热门文章

React 优雅 初级入门

一． 初识react [逆战(●’◡’●)]

React的官网：https://reactjs.org/

1. react的定义

2. react的起源

3. react的特点

二． React环境搭建

1．使用方式

2．通过script引入相关js搭建react环境

第一步安装：

2. 第二步，引入其中所需要的js文件

3. 第三步，script标签必须为 type=“text/babel”

4. 一个基本的react实例

5. 实例分析说明：

3．通过脚手架搭建react环境

使用的是webpack

三． React的jsx语法

1. 什么是jsx？

2. Jsx语法

（1） Jsx中所有的js表达式写在{}中

（2） Jsx中写style样式

（3） jsx的class要改为className

（4） 绑定事件，事件名需要首字母大写onXxx={}

（5） for属性需要写成htmlFor

（6） 遍历数组时，需要加key属性标识每一个元素标签

（7） 遍历对象：先把对象转为数组，再进行遍历

项目步骤

React 优雅 初级入门相关推荐

最新文章

热门文章

React 优雅初级入门

一．初识react [逆战(●’◡’●)]

（4）绑定事件，事件名需要首字母大写onXxx={}

（6）遍历数组时，需要加key属性标识每一个元素标签

（7）遍历对象：先把对象转为数组，再进行遍历

React 优雅初级入门相关推荐