12.React.js基础

react 是最流行的前端框架之一。

npm i react

初始化

初始化react项目

npx create-react-app test2

运行

npm  start

尝试修改内容，观察变化

组件

import logo from './logo.svg';
import './App.css';
// 组件定义
function WelcomeMsg(){
  return <h1>Welcome to Web3!</h1>
}
function App() {
  const message="Hello, World";
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* 组件使用 */}
        <WelcomeMsg/>
      </header>
    </div>
  );
}

export default App;

组件一般是单独管理在目录下

JSX

很像html但不是，它可以用js里面内内容

状态管理

任何组件都有自己的状态，也可以去改变自己的状态。

需要用useState

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function Counter(){
  // useState中的0代表count初始状态0,setCount改变状态
  const[count,setCount]=useState(0);
  return(
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>Click me!</button>
    </div>
  )
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* 组件使用 */}
        <Counter/>
      </header>
    </div>
  );
}

export default App;

传递属性

import { useState } from 'react';
function Counter({name}){
  // useState中的0代表count初始状态0,setCount改变状态
  const[count,setCount]=useState(0);
  return(
    <div>
      <p>{name} clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>Click me!</button>
    </div>
  )
}


 {/* 组件使用 */}
<Counter name="soni"/>

页面初始化的数值处理

useEffect

页面加载前渲染数据

import { useState,useEffect } from 'react';

function Counter({name}){
  // useState中的0代表count初始状态0,setCount改变状态
  const[count,setCount]=useState(0);

  useEffect(()=>{
    console.log(`${name} clicked ${count} times. `);
  });
  // 只监听name变化
  // useEffect(()=>{
  //   console.log(`${name} clicked ${count} times. `);
  // },[name]);


  return(
    <div>
      <p>{name} clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>Click me!</button>
    </div>
  )
}

完整代码

import logo from './logo.svg';
import './App.css';
import { useState,useEffect } from 'react';

function Counter({name}){
  // useState中的0代表count初始状态0,setCount改变状态
  const[count,setCount]=useState(0);

  useEffect(()=>{
    console.log(`${name} clicked ${count} times. `);
  });
  // 只监听name变化
  // useEffect(()=>{
  //   console.log(`${name} clicked ${count} times. `);
  // },[name]);


  return(
    <div>
      <p>{name} clicked {count} times</p>
      <button onClick={()=>setCount(count+1)}>Click me!</button>
    </div>
  )
}
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {/* 组件使用 */}
        <Counter name="soni"/>
      </header>
    </div>
  );
}

export default App;