1：创建项目并启动

第一步：全局安装：npm i -g create-react-app

第二步：切换到想创项目的目录，使用命令：create-react-app hello-react

第三步：进入项目文件夹：cd hello-react

第四步：启动项目：npm start

启动一个新的 React 项目 – React 中文文档

jsx

在js中编写html模板 Babel 中文网 (nodejs.cn)

jsx中使用js表达式

在jsx中用过大括号语法{} 来识别JavaScript语法

使用场景

1：使用引号传递字符串

import './App.css';

function App() {
  return (
    <div className="App">
      {'字符串识别'}
    </div>
  );
}

export default App;

2：使用JavaScript变量

import './App.css';

function App() {
  const str = '这是一个字符串';

  return (
    <div className="App">
      {str}
    </div>
  );
}

export default App;

3：函数调用和方法调用

import './App.css';

function getstr(){
  return '字符串'
}

function App() {
  return (
    <div className="App">
      {/* 函数调用 */}
      { getstr() }
      {/* 方法调用 */}
      { new Date().getDate() }
    </div>
  );
}

export default App;

4：使用JavaScript对象

import './App.css';

function App() {
  const sty = {
    color:'red'
  }
  return (
    <div className="App">
      <div style={sty}> 字符串 </div>
    </div>
  );
}

export default App;

注意：{}中只支持表达式，不支持语句

jsx中列表渲染，循环渲染

利用map方法

import './App.css';

const list =[
  {name:'t',id:1},
  {name:'ts',id:2},
  {name:'tsy',id:3},
]

function App() {
  return (
    <div className="App">
      <ul>
        {list.map((item)=>{
            return <li key={item.id}>{item.name}</li>
          })}
      </ul>
    </div>
  );
}

export default App;

jsx条件渲染

利用逻辑与运算符&&或者三元表达式

import './App.css';

const isIf=true;
const isIfnot=false;

function App() {
  return (
    <div className="App">
      { isIf && <span>zfc</span> }
      { isIfnot && <span>isIfnot</span> }

      { isIf?<span>1</span>:<span>0</span>}
    </div>
  );
}

export default App;

复杂循环条件渲染

通过调用函数渲染，方法不唯一

import './App.css';

const list = [
  {str:'asdasd',type:0,id:0},
  {str:'qwqeqw',type:2,id:3},
  {str:'ghfgh',type:0,id:2},
  {str:'yuiyi',type:1,id:1},
]

function getstr(item){
  let classname = ''; 

  if (item.type === 0) {
    classname = 'red';
  }else if (item.type === 1) {
    classname = 'pink';
  }else if (item.type === 2) {
    classname = 'aqua';
  }

  return <div className={classname} key={item.id}>{item.str}</div>
}

function App() {
  return (
    <div className="App">
      {list.map(item => getstr(item))}
    </div>
  );
}

export default App;

事件绑定

事件注意用驼峰

import './App.css';

function App() {
  const asd = (e)=>{
    console.log('事件对象',e);
  }
  const btn = (name,e)=>{
    // 自定义传参
    console.log(name);
    // 事件对象
    console.log(e);
  }

  return (
    <div className="App">
      <button onClick={asd}>button</button>
      <button onClick={(e)=>btn('ooo',e)}>button</button>
    </div>
  );
}

export default App;

组件

import React, { Component } from 'react'
//类式组件
export default class header extends Component {
  render() {
    return (
      <div>
        head
      </div>
    )
  }
}

import './App.css';

// 类式组件
import Header from './component/header'
// 函数式组件
function Button(){
  return <button>button</button>
}

function App() {
  return (
    <div className="App">
      <Button></Button>
      <Header></Header>
    </div>
  );
}

export default App;

useState基础使用

useState是一个hook（函数），它允许我们向组件添加一个状态变量，从而影响组件的渲染结果和普通的js变量不同的是，状态变量一旦发生变化组件的ui试图也会发生变化（数据驱动试图）

import { useState } from 'react'

function App() {
  // 1,调用useState添加一个状态变量
  // count 状态变量
  // setCount 修改状态变量的方法
  const [count,setCount] = useState(0)

  const addcount = ()=>{
    // 1，作用传入新值修改count
    // 2，使用新值重新渲染ui
    setCount(count+1)
  }

  return (
    <div className="App">
      <button>{count}</button>
      <button onClick={addcount}>+</button>
    </div>
  );
}

useState规则

1:状态不可变

在react中，状态被认为是只读的，我们应该替换它而不是修改，直接修改状态不会引发视图跟新

  const [count,setCount] = useState(0)

  const addcount = ()=>{
    // 直接修改无法引发试图跟新
    count++;
    console.log(count);
    //只有调用它匹配的setCount方法，才会引发试图更新
    setCount(count+1)
  }

2:修改复杂类型，修改对象状态

利用解构

  const [count,setCount] = useState({
    name:'tsy',
    age:25,
    sex:'n'
  })

  const addcount = ()=>{
    // 利用解构给count重新赋值
    setCount({
      ...count,
      name:'yst'
    })
  }

拓展 classnames优化类名控制

classnames是一个简单的js库，可以非常方便的通过条件动态控制class类名显示 classnames - npm (npmjs.com)

react-day1