react入门

react入门

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

1.虚拟dom节点
2.单向数据流
3.组件开发思维

react的使用

一.安装

1. 安装脚手架

        npm i create-react-app -g 

2.创建项目

         create-react-app 项目名称 

3.启动

          cd 项目 

          npm start 

二.JXS简介

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

三.元素渲染

1.文本渲染

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

运行结果：

你好react
2
tcaer好你

2.html渲染

const msg = "<b>hi!</b>中国"
function App() {
  return (<div>
    <p dangerouslySetInnerHTML={{ __html: msg }}></p>
  </div>)
}
export default App;

四.条件渲染

1.&& 与运算符

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

如果条件是 true ，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
2.三目运算符

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

五、列表渲染

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

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

六、事件

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

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

function App() {
  return (<div>
    <button onClick={() => { alert("秋天") }}>按钮</button>
  </div>)
}
export default App;

2.onClick={函数名}

const say = function () {
  alert("秋天")
}
function App() {
  return (<div>
    <button onClick={say}>按钮</button>
  </div>)
}
export default App;

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

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (<div>
    <button onClick={say.bind(this, '真美')}>按钮</button>
  </div>)
}
export default App;

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

const say = function (str) {
  alert("秋天" + str)
}
function App() {
  return (<div>
    <button onClick={() => say('真温柔')}>按钮</button>
  </div>)
}
export default App;

七、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 }
    }
    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;

更新state状态：

    this.setState({key:value})

八、 Simple React Snippets ，react 快速生成代码块插件

在作组件的时候，都需要写一个固定的基本格式，这时候你就可以使用快捷键帮我们生成代码

imrc + Tab 生成如下代码：

import React, { Component } from 'react';

ccc+Tab 生成如下代码：

class Test extends Component {
  state = {  }
  render() { 
    return ( <div></div> );
  }
}
export default Test;