react入门必看攻略

一、react是什么？

react是一个用于构建用户界面的 JavaScript 库

二、使用步骤

安装react

1. 安装脚手架

npm i create-react-app -g

2. 创建项目

create-react-app 项目名

3. 启动项目

npm start

二、元素渲染

文本渲染

const str = "你好react"
function App() {
  return (

    
{str}
    
{3 - 1}
    
{str.split('').reverse().join('')}
  
)
}
export default App;

运行结果：

html渲染 

import './App.css';

const stl = {
	fontSize:'24px',
	color:'red'
}
function App(){
	return (

	
开摆开摆
	{
应用样式
}
	
)
}
export default App;

运行结果：

 

三、条件渲染

 && 与三目运算符

const str = '给我爱吃的喜之郎';
const msg = '还是html简单';
const score = 80;
let flag = true;
const list = ['react','vue','angular','jQuery'];
function App(){
	return (
	

	
长大我想当太空人
	
爷爷奶奶可高兴了
	
{str}
	
{2+3}
	
{str.length}
	
{str.split('').reverse().join('')}
	
条件渲染
	

	
条件渲染
	{score>=60?'及格':'再学一遍'}
	{flag&&
啊这
}
	
列表渲染
	{list.map((item,index)=>
{item}
)}
	
)
}
export default App;

如果条件是 true ，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。

四、列表渲染

import './App.css';

const arr = [
	
我直接坐飞机去你的坟头
,
	
疯狂的偷吃你的贡品
,
	
啊对对对
]
const stl = {
	fontSize:'24px',
	color:'red'
}
function App(){
	return (

	
开摆开摆
	{arr}
	{
应用样式
}
	
)
}
export default App;

运行结果：

key 帮助 React 识别哪些元素改变了，比如被添加或删除。应当给数组中的每一个元素赋予一个确定的标识。
如果列表项目的顺序可能会变化，不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

五、事件渲染

 React 事件与 js 事件一致 ，但是React 事件的命名采用 小驼峰式 （camelCase）
事件的四种语法：

1、箭头函数 onClick={()=>{ xx }}

function App() {
  return (

     { alert("秋天") }}>按钮
  
)
}
export default App;

2、onClick={函数名}

const say = function () {
  alert("秋天")
}
function App() {
  return (

    按钮
  
)
}
export default App;

3、onClick={函数名.bind(this,参数)}

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (

    按钮
  
)
}
export default App;

4、onClick={()=>函数名(参数)}

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (

     say('真温柔')}>按钮
  
)
}
export default App;

六、react 响应式数据 State

import React,{Component}from 'react';
class App extends Component{
	constructor(props) {
	    super(props);
		this.state={num:1}
	}
	addNum(n){
		this.setState({num:this.state.num+n})
	}
	render(){
		return(

		
函数类
		{
			this.setState({num:this.state.num+1})
		}}>{this.state.num}
		{this.state.num}
		
);
	}
}
export default App;