React

react 配置

1. 安装脚手架: npm i create-ract-app
2. 使用脚手架 初始化一个项目 create-react-app 项目名
3. 依赖安装完成 执行 cd 项目名 npm start

react 组成部分

• react.js 核心库
• react-dom 提供 DOM 相关的功能

jsx语法 js+html 混写的方法 React使用jsx语法开发 因此只有导入react 才能使用jsx 语法

import React from 'react';
import  ReactDOM from 'react-dom'
let h = <p>这是一个jsx语法</p>
let a = {
    name:'张三',
    age:13,
}
let h1 = <h2 id = 'abc'>姓名：{a.name}; 年龄:{a.age}</h2>
<!--将React元素 渲染到页面中 -->
ReactDOM.render(h,document.gitElementById('root'))
ReactDOM.render(h1.name,document.gitElementById('root'))
ReactDOM.render(h1, document.getElementById('root'), () => {
  // 这个回调函数会在 longHTML 渲染到页面之后被调用
  // 如果需要操作刚刚渲染到页面中的元素，要在这里面获取和操作它
})

jsx注意事项

• 最外层 只能有一个根节点
• jsx 要遵守js语法
• jsx 通过{} 使用表达式 只能写表达式
• class ---- className for ----- htmlFor style属性 要写成对象的形式
• jsx 是虚拟DOM 最终通过 babel编译成普通的对象
• jsx换行 （）包裹

ReactDOM.render()渲染

执行时 先将虚拟DOM转换成真实的DOM 再将真实的DOM插入到DOM元素中 最后执行回调函数 可以在这个函数中操作DOM

列表渲染 React 和 vue 都是数据驱动 需要使用map方法 回调函数中返回要生成的jsx元素

//三种方法
import React from 'react';
import ReactDOM from 'react-dom';

let ary = [
    {
        name:'zhangsan',
        age:14,
        title:'一'
    },
    {
        name:'lisi',
        age:14,
        title:'二'
    }
];
let aa = ary.map(function (item,index) {
    return <li key = {index}>姓名：{item.name};年龄：{item.age}; 级别：{item.title}</li>
})

// let ul = (
//     <ul>
//     {aa}
//     </ul>
// )
<!--let b = (<ol>-->
<!--{-->
<!--    ary.map((item,index)=><li key={index}>name: {item.name}; age: {item.age}; title: {item.title}</li>)-->
<!--}-->
<!--</ol>)-->
ReactDOM.render(aa,document.getElementById('root'))
//ReactDOM.render(ul,document.getElementById('root'))
<!--ReactDOM.render(b,document.getElementById('root'))-->

React.createElement(type,props,...chilidren)

type 标签类型 props 行内属性 对象数据类型 children 从第三个参数开始都是type的子元素

import React from 'react';
import ReactDOM from 'react-dom';

let al = React.createElement(
    'p',
    {x:11,y:22},
    'hello',
    React.createElement('span',{s:1},11),
    React.createElement('span',null,22)
)
ReactDOM.render(al,document.getElementById('root')) //hello1122

列表渲染 需要用if-else等判断语句

1.css
.odd {
  background: lightseagreen;
}
.even {
  background: lawngreen;
}



import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import './1.css'

let fruits = [
  {
    name: '苹果',
    color: ['red', 'green', 'yellow']
  },
  {
    name: '香蕉',
    color: ['green', 'yellow']
  },
  {
    name: '芒果',
    color: ['green', 'yellow']
  }
]

let lis = fruits.map((fruit, fIndex) => {
  return (<li key={fIndex} className={ fIndex % 2 === 0 ? 'odd' : 'even'}>
    <p>{fruit.name}</p>
    <ul>
      {
        fruit.color.map((color, cIndex) => {
          return <li key={cIndex} className={cIndex % 2 === 0 ? 'odd' : 'even'}>{color}</li>
        })
      }
    </ul>
  </li>)
})

let ul = <ul>
  {lis}
</ul>

ReactDOM.render(ul, document.getElementById('root'))