一、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]
})
}