react入门

前置知识

我们假定你已经对 HTML 和 JavaScript 都比较熟悉了。即便你之前使用其他编程语言，你也可以跟上这篇教程的。除此之外，我们假定你也已经熟悉了一些编程的概念，例如，函数、对象、数组，以及 class 的一些内容。

如果你想回顾一下 JavaScript，你可以阅读这篇教程。注意，我们也用到了一些 ES6（较新的 JavaScript 版本）的特性。在这篇教程里，我们主要使用了箭头函数（arrow functions）、class、let 语句和 const 语句。你可以使用 Babel REPL 在线预览 ES6 的编译结果。

环境准备

完成这篇教程有两种方式：可以直接在浏览器中编写代码，也可以在你电脑上搭建本地开发环境。

方式一：在浏览器中编写代码

首先在新的浏览器选项卡中打开这个初始模板。 你可以看到一个空的井字棋盘和 React 代码。我们接下来会在本教程中修改该 React 代码。

如果你选择这种方式，就可以跳过方式二，直接从概览开始阅读教程啦。

方式二：搭建本地开发环境

这是完全可选的

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍：

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// 用法示例: <ShoppingList name="Mark" />

我们马上会讨论这些又奇怪、又像 XML 的标签。我们通过使用组件来告诉 React 我们希望在屏幕上看到什么。当数据发生改变时，React 会高效地更新并重新渲染我们的组件。

其中，ShoppingList 是一个 React 组件类，或者说是一个 React 组件类型。一个组件接收一些参数，我们把这些参数叫做 props（“props” 是 “properties” 简写），然后通过 render 方法返回需要展示在屏幕上的视图的层次结构。

render 方法的返回值描述了你希望在屏幕上看到的内容。React 根据描述，然后把结果展示出来。更具体地来说，render 返回了一个 React 元素，这是一种对渲染内容的轻量级描述。大多数的 React 开发者使用了一种名为 “JSX” 的特殊语法，JSX 可以让你更轻松地书写这些结构。语法 <div /> 会被编译成 React.createElement('div')。上述的代码等同于： 

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);

jsx语法 

 react 响应式数据state

// 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 (<div>
		<h1>函数类</h1>
		<button onClick={()=>{
			this.setState({num:this.state.num+1})
		}}>{this.state.num}</button>
		<button onClick={this.addNum.bind(this,2)}>{this.state.num}</button>
		</div>)
	}
}
export default App;

 渲染

const str = "你好react"
const msg = "还得是你<strong>HTML</strong>"
const score = 80;
let flag = true;
const list = ['abc','bcd','cdf']
function App() {
	return (<div>
	<h1>模板语法</h1>
	<p>{str}</p>
	<p>{2+3}</p>
	<p>{str.split('').reverse().join('')}</p>
	<p> 02 html渲染</p>
	<p dangerouslySetInnerHTML={{__html:msg}}></p>
	<p>03条件渲染(三目运算符,&&)</p>
	<p>{score>=60?'及格':"重学"}</p>
	{flag&&<p>芝麻开门</p>}
	<p>04列表渲染</p>
	{list.map((item,index)=><p key={index}>{item}</p>)}
	</div>)
}
export default App;

定义一个数组 

//定义一个数组
const arr = [
	<p key="a">你好我叫王某</p>,
	<p key="b">我非常牛逼</p>,
	<p key="c">不要试图挑衅我</p>
]
const stl = {
	fontSize:"24px",
	color:"#f70"
}
//创建app组件
function App(){
	//返回一个dom节点
	return (<div>
	<h1 className='myh'>你好react</h1>
	{arr}
	<p style={stl}>应用样式</p>
	</div>)
}
//导出
export default App;

点击事件

function App(){
	function say(str){
		alert("我喜欢秋天"+str)
	}
	return (<div>
	 <h1>事件</h1>
	 <p>react 事件与js事件一致,需要驼峰写法</p>
	 <button onClick={()=>{alert("我喜欢春天")}}>按钮</button>
	 <button onClick={say.bind(this,"的风")}>按钮</button>
	 <button onClick={say.bind(this,"的景色")}>按钮</button>
	 <button onClick={()=>say("的温度")}>按钮</button>
	</div>)
}
export default App;