超简单react入门

简介

        react是Facebook公司出品的，用于创建用户界面的JavaScript库

特点

        组件思维

        单向数据流

        虚拟dom节点

目录

简介

特点

安装及使用

安装

 创建react文件

运行文件

JSX语法

        有且只有一个dom节点

        {}里面写js

        class变为className

        数组可以包含html

        对象样式自动展开

        {/* */}注释

元素渲染

        文本渲染

        html渲染

        条件渲染

                   逻辑运算符

                三目运算符

        列表渲染

事件响应

                react事件与js事件相同，命名时使用驼峰命名法。例 onClick,onBlur...

        箭头函数  onClick={()=>{  }} 

​​

         onClick={函数名}

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

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

react组件的类型

组件的数据状态state

---

安装及使用

安装

npm i create-react-app -g 

 创建react文件

 create-react-app 项目名称 

运行文件

cd 到你的项目 
npm start 

JSX语法

        有且只有一个dom节点

        {}里面写js

        class变为className

        数组可以包含html

        对象样式自动展开

        {/* */}注释

元素渲染

        文本渲染

const str = "祝你每天好心情"
function App() {
  return (<div>
    <p>{str}</p>
    <p>{1 + 1}</p>    //{}里面可以写定义的变量，也可以写入js
    <p>{str.split('').reverse().join('')}</p>    //逆序
  </div>)
}
export default App;

        html渲染

const msg = "<strong>你好，</strong>世界"
function App() {
  return (<div>
    <p dangerouslySetInnerHTML={{ __html: msg }}></p>
  </div>)
}
export default App;

        条件渲染

                   逻辑运算符

                

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

 

                三目运算符

const score = 80
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;

事件响应

                react事件与js事件相同，命名时使用驼峰命名法。例 onClick,onBlur...

        箭头函数  onClick={()=>{  }} 

function App() {
    return (<div>
      <button onClick={() => { alert("你好呀!") }}>点我</button>
    </div>)
  }
  export default App;

         onClick={函数名}

const say = function () {
    alert("你好呀")
  }
  function App() {
    return (<div>
      <button onClick={say}>点我</button>
    </div>)
  }
  export default App;

 

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

const say = function (str) {
    alert("你好" + str)
  }
  function App() {
    return (<div>
      <button onClick={say.bind(this, 'react')}>点我</button>
    </div>)
  }
  export default App;

 

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

const say = function (str) {
    alert("你好" + str)
  }
  function App() {
    return (<div>
      <button onClick={() => say('有缘人')}>点我</button>
    </div>)
  }
  export default App;

 

react组件的类型

// 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={()=>{
            // 更新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;

// 更新state状态 this.setState({key:value})
// 

左边点一次＋1，右边点一次+2 

组件的数据状态state

state = {num:5}

this.setState({num:10})