目录

React框架简介

特点

创建一个react项目

成功后

1. ?React入门案例

?渲染语法

?事件

函数类

?

---

---

React框架简介

react是Facebook公司产品用于创建用户界面Javascript库

特点

1.组件思维

2.单向流数据

3. 虚拟Dom节点

创建一个react项目

我们想要用react框架来完成我们的项目首先就要创建一个react文件夹

1.window+R键打开我们的小黑框

2.cd /到我们的根目录

3.输入安装命令

npm i create-react-app -g
1

安装后

4.创建

create-react-app react
1

成功后

5.运行我们的项目

cd reacts

npm start

6.成功后跳转页面

React入门案例

1.创建一个App，返回一个doom节点

function App(){
	//返回一个Dom节点
	return (
	

	
react入门案例
	
	
	)
}
1
2
3
4
5
6
7
8
9

运行结果

渲染语法

1.文本渲染

2.html渲染

3. 条件渲染

4.条件渲染

const str = "react,冲冲冲"
const msg = "html相对简单";
const score = 90;
let flag = true;
const list = ["reacct","vue","angular","jQuery"];
function App(){
  function say(){
    alert("over")
  }
  return (
    

      
语法模板
      
01文本渲染
      
{str}
      
{6+3}
      
{str.split('').reverse().join('')}
      

      
02html渲染
      
{__html:msg}}>
      

      
03条件渲染
      
{score >= 85?'很棒':'再加把劲'}
      {flag&&
快快发芽长大
}
      

      
04数组渲染
      {list.map((item,index) => 
{item}
)}  
     
    
    
  )
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

事件

点击结束按钮跳出弹框

const str = "react,冲冲冲"
const msg = "html相对简单";
const score = 90;
let flag = true;
const list = ["reacct","vue","angular","jQuery"];
function App(){
  function say(){
    alert("over")
  }
  return (
    

      
语法模板
      
01文本渲染
      
{str}
      
{6+3}
      
{str.split('').reverse().join('')}
      

      
02html渲染
      
{__html:msg}}>
      

      
03条件渲染
      
{score >= 85?'很棒':'再加把劲'}
      {flag&&
快快发芽长大
}
      

      
04数组渲染
      {list.map((item,index) => 
{item}
)}  
      

      
事件
      
react事件与js事件需使用驼峰写法
      结束
    
    
  )
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

注意：

事件需要响应一个函数：onClick={( )=>alert("箭头函数)}；

onClick={say}
function say( ){}

还有事件函数的传参：

function App(){
?? ?function say(str){
?? ??? ?alert("I love react"+str)
?? ?}
?? ?return (

?? ?
事件
?? ?
react 事件与js事件一致,驼峰式写法
?? ?按钮1
?? ?按钮2
?? ?say("爱到词穷")}>按钮3
?? ?
)
}
export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13

函数类

点击左侧按钮加一，右侧按钮加2

// react 响应式数据state
// 导入React 和Component方法 imrc + TAB
import React, { Component } from 'react';

// 创建一个App类 基础了Component方法 ccc+Tab
class App extends Component {
  // 构造函数
  constructor(props) {
    // 执行父类方法
    super(props);
    // 响应式状态
    this.state = { num:1 }
  }
  // 更新num
  addNum(n){
    this.setState({num:this.state.num+n})
  }
  // 渲染方法
  render() { 
    // 返回一个节点
    return (

      
函数类
      {
        //更新num值为原来的值加1
        this.setState({num:this.state.num+1})
      }}>{this.state.num}
      {this.state.num}
    
);
  }
}
 
export default App;

// 更新state状态 this.setState({key:valu})
// bind 创建一个新的函数，改变this
// state状态（数据）理解为vue里面的data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

jsx语法：JavaScript嵌套使用HTML模板
01有且只有一个根节点
02{}书写js
03class改成className
04数组可以包含html
05对象样式自动展开
06{/**/}注释

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦