react的jsx的基本语法和创建脚手架

初始react

react是一个构建用户界面的javascript库

创建一个简单react

第一步：引入核心库

<!-- react开发的核心库，创建虚拟dom对象 -->
<script src="./../js/react.development.js"></script>
<!-- 将虚拟dom转化为html，渲染视图所用 -->
<script src="./../js/react-dom.development.js"></script>

第二步：在真实dom中提供一个挂载点

    <div id="root"></div>

第三步：业务代码

创建虚拟dom对象 - createElement
let el = React.createElement
/*
    三个参数：
        参数1：html标签名称 / 组件名称
        参数2：标签属性，也可以是null，表示没有属性
        参数3：子元素，可以是一个可以多个，可以是标签，字符串，对象，组件....
*/
let vnode = el('div',{
    name:'a',
    // class属性不能用class了，得用className
    className:'active',
    // 事件 用小驼峰命名
    onclick:()=>{}
    },'哈哈')
/*
    将虚拟dom转为真实dom，渲染到页面
    参数1：虚拟dom，也可以是组件
    参数2：挂载点的真实dom
*/
ReactDom.render(vnode,document.querySelector('#root'))

这样的写法看起来很麻烦又不容易读代码，所以提供了一个babel库来解决这个问题，babel库就是把jsx代码解析成js代码的

第一步：引入babel库 (可以从bootstrap中直接应用，也可以下载，这里就不放了，实际用react脚手架不需要我们再这样引入)

第二步：在script标签上加<script type='text/babel'>代码段</script>

第三步：这时候的写法就和我们平常的HTML写法一样了

let vnode = (
        <ul>
            <li>
                <span>任务1</span>
                <span> -- 删除</span>
            </li>
        </ul>
)
ReactDOM.render(vnode,document.querySelector('#root'))

搭建react脚手架

安装前提：nodejs版本14+，npm版本5+

安装命令：npx create-react-app my-app

react组件

1.函数组件：（如果你在vscode中安装jsx插件可用 rfc 快捷键完成代码块搭建）

1. 创建一个函数 function / 箭头函数(推荐)

  2. 函数名 首字母要大写

  3. 必须要有返回值，返回值是一个jsx

  4. 必须通过模块导出

  注意：函数有一个可能的参数，可以接受任意值的数据[props]

2.类组件：(rcc)

 1. 必须要用es6的面向对象创建类 class 创建

  2. 它要继承一个父类[React.Component]

  3. 此类中必须要有一个render方法，此方法一定要返回一个jsx

  4. 导出此类

react组件传值

1.父传子

函数组件

使用自定义属性 子接收用props

props参数可以接收任意类型

import React from 'react';

// 子组件 - 通过解构来获取props中的属性数据也可设置默认值
// const Child = ({title='默认值'}) => {

// 常用
  const Child = props => {
  let { title='默认值', fn, temp } = props
  fn && fn()
  return (
    <div>
      <h3>{title}</h3>
      {temp}
    </div>
  )
}

// 需要传递的组件
const Temp = () => {
  return (
    <center>我是传来的组件</center>
  )
}

const App = () => {
  // 变量
  const title = '传来的child'
  const fn = () => console.log('传来的fn');
  return (
    <div>
      {/* 通过自定义属性，传值给子组件数据 */}
      {/* 啥也不传值 */}
      <Child></Child>
      <hr />
      {/* 传个数据 */}
      <Child title={title}></Child>
      <hr />
      {/* 传个函数 */}
      <Child fn={fn}></Child>
      <hr />
      {/* 传个组件 */}
      <Child temp={<Temp></Temp>}></Child>
    </div>
  );
}

export default App;

类组件

父传子传值和函数组件差不多，但获取需要用this.props

代码参考函数组件，将数据传入用this.数据

绑定事件

函数组件：（函数组件没有this）

{/* 点击事件命名小驼峰 */}
<button onClick={fn}>点我++</button>

类组件：

<button onClick={this.fn}>点我++</button>

注：修改数据不会重新渲染视图，可以用强刷新 this.forceUpdate()

event事件

每个方法中都有一个形参是evt，是触发事件的dom对象，可用它获取值或者操作dom

// 无参数
  // 都会有一个参数evt.是当前触发事件的dom对象
  // 获取输入的值
  fn = (evt) => console.log(evt.target.value)
  // 如果在绑定方法时，用了小括号传参，则event就顺延到后面
  fn1 = id => evt => console.log(id, evt.target.value);
  // 有参数-主动把event对象传入
  fn2 = (id, evt) => console.log(id, evt.target.value)

render函数中

render() {
    return (
      <div>
        无参数：<input type="text" onInput={this.fn} />
        {/* 有小括号传参 */}
        有参数：<input type="text" onInput={this.fn1(100)} />
        {/* react事件中心 绑定事件会主动把event对象传入到实现方法参数中 */}
        主动放参数：<input type="text" onInput={(evt) => { this.fn2(100, evt) }} />
      </div>
    );
  }

注：

如果有小括号传参，则方法需要函数包裹，evt顺延到后面

也可以在绑定事件时添加一个箭头函数包裹，并且把evt形参传递过去（常用）