react学习day2

1.自定义组件编写

import React from 'react';
const Button=()=>{
  return <button>click me!</button>
}
function App() {
  return (
    <div>
      {/* 自定义组件 */}
      <Button></Button>
    </div>
  );
}
export default App;

2.useState hook函数的使用，修改状态

import React from 'react';
import {useState} from 'react'
function App() {
  const [count,setCount]=useState(0)
  const handleClick=()=>{
    setCount(count+1)
  }
  const [form,setForm]=useState({name:'jack'})
  const changeForm=()=>{
    setForm({
      ...form,
      name:'john'
    })
  }
  return (
    <div>
      <button onClick={handleClick}>{count}</button>
      <button onClick={changeForm}>{form.name}</button>
    </div>
  );
}
export default App;

3.样式修改的方式

import React from 'react';
import './App.css'
const style={
  color:'blue',
  fontSize:'20px'
}
function App() {
  return (
    <div>
      <span style={{color:'red',fontSize:'50px'}}>this is app</span>
      <span style={style}>second</span>
      <span className='foo'>third</span>
    </div>
  );
}
export default App;