初学React笔记（一）

---

一、React

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

*my-app是文件名 *

npx create-react-app my-app

使用cd跳转到当前创建文件的页面

cd my-app

运行

npm start

二、JSX简介

const App = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

在 JSX 中嵌入表达式

在下面的例子中，我们声明了一个名为 name 的变量，然后在 JSX 中使用它，并将它包裹在大括号中：
代码如下（示例）：

const name = 'Lisa';
const App= <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

三、元素渲染

将一个元素渲染为DOM
假设你的 HTML 文件某处有一个 < div >

<div id="root"></div>

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

const App= <h1>Hello, world</h1>;
ReactDOM.render(App, document.getElementById('root'));

---

四、State&class

首先引入react

import React, { Component } from 'react';

添加一个 render() 方法

class App extends Component{
	render() {
		<div>
			<h1>Hello World!</h1>
		</div>
	}
}

添加一个 class 构造函数

class App extends Component{
	constructor(props) {//构造函数
    	super(props);//继承
    	this.state = {data:''};//相当于Vue中的data
	}
	render() {
		<div>
			<h1>Hello World!</h1>
		</div>
	}
}

Class 组件应该始终使用 props 参数来调用父类的构造函数。

---

四、事件处理

使用onClick添加点击事件，注意是小驼峰命名，而不是纯小写

<button onClick={addList}>
  Click me
</button>

做个小例子：

使用点击事件实现输入input的值添加到列表里

首先在render()里添加jsx

class Child extends Component{
   render(){
       return(
			<div>
				<input />
				<button>添加</button>
				<ul>
					{
						this.state.listName.map((item,index)=>{
							return <li key={index} >{item}</li>
						})
					}
				</ul>
			</div>
       )
   }
}

这里使用了列表渲染map(）方法遍历，记得加上key值，否则会报错

<ul>
	{
		this.state.listName.map((item,index)=>{
			return <li key={index} >{item}</li>
		})
	}
</ul>

加上构造函数

constructor(props) {
	super(props);
	this.state={
		listName:["Jenny","Lisa","Rose"],
		inputVal:" ",//input的value值
	}
}

给input添加onChange()方法和value

<input value={this.state.inputVal} onChange={this.changeList} />

changeList=(e)=>{
	console.log(e.target.value)
	this.setState({
		inputVal:e.target.value
	})
}

给按钮添加点击事件，追加到列表，使用展开运算符…

<button onClick={this.addList.bind(this)} >添加</button>

addList(){
	const listName = [...this.state.listName];
	this.setState({
		listName:[...listName,this.state.inputVal],
		inputVal:" "   //添加完成后清空input框
	})
}

最后再做个删除，给每个li添加点击事件

return <li key={index} onClick={this.delList.bind(this,index)}>{item}</li>

delList(index){
	const listName = [...this.state.listName];
	listName.splice(index,1)
	this.setState({
		listName:[...listName]
	})
}