React简单安装、使用

前言

react是fachebook公司产品用于创建用户界面的javascript库

React 特点：

• 虚拟dom节点
• 单向数据流
• 组件开发思维

一、安装

脚手架安装

npm i create-react-app -g

创建项目

create-react-app 项目名

启动项目

cd 项目名
npm start

二、jsx语法

JSX，是一个 JavaScript 的语法扩展（ JavaScript 与 HTML 结合）。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

JSX 特点 ：

•   有且只有一个根节点
•   class用className代替
•   数组可以放html节点，数组自定展开
•   {} 表示javascript
•   样式自动展开
•   {/*注释内容*/}

三、元素渲染

文本渲染

const str = "你好react"
function App() {
  return (<div>
    <p>{str}</p>
    <p>{3 - 1}</p>
    <p>{str.split('').reverse().join('')}</p>
  </div>)
}
export default App;

运行结果：

 html渲染

const msg = "还是<strong>html</strong>简单些"
function App() {
  return (<div>
    <p dangerouslySetInnerHTML={{ __html: msg }}></p>
  </div>)
}
export default App;

条件渲染

const flag = true
function App() {
  return (<div>
    {flag && <p>芝麻开门</p>}
  </div>)
}
export default App;

三目运算符

const score = 80
function App() {
  return (<div>
    <p>{score > 60 ? '及格' : '不及格'}</p>
  </div>)
}
export default App;

列表渲染

const list = ["react", "vue", "angular", "jQuery"];
function App() {
  return (<div>
    {list.map((item, index) => <p key={index}>{item}</p>)}
  </div>)
}
export default App;

四、事件

react中事件与js事件一致，需要驼峰写法

function App() {
  function say(str) {
    alert("我喜欢秋天的风" + str)
  }
  return (<div>
    <h1>事件</h1>
    <p>react 事件与js事件一致，需要驼峰写法</p>
    {/* <button onClick={() => { alert("春天") }}>按钮</button> */}
    <button onClick={say.bind(this, "甜的")}>按钮1</button>
    <button onClick={say.bind(this, "辣的")}>按钮2</button>
    <button onClick={() => say('苦的')}>按钮3</button>
  </div>)
}
export default App;

按钮1

按钮2

按钮3 

 

五、react 响应式数据 State 

// 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 + 1 })
  }
  // 渲染方法
  render() {
    // 返回一个节点
    return (
      <div>
        <h1>函数类</h1>
        <button onClick={() => {
          // 更新num值为原来的值加1
          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;