会vue，怎么快速上手react

 

1. 安装react脚手架

npx create-react-app react-basic

2.删除干扰的文件

 

 react以JSX模版。jsx：JavaScript XML 缩写 

3.开始学习jsx

const str="变量"
const color={
  color:"green"
}
function fun(){
 return str+"fun"
}

function App() {
  return (
    <div className="App">
      {/* 使用变量 */}
      <p>{str}</p>
      {/* 使用函数 */}
      <p>{fun()}</p>
      {/* 使用对象 */}
      <p style={{color:'red'}}>red</p>
      <p style={color}>green</p>
      
    </div>
  );
}

export default App;

其他基础入门

// 使用useState 要放最顶部
import { useState } from 'react';


const str="变量"
const color={
  color:"green"
}
const list=[
  {id:1,name:"woods"},
  {id:2,name:"jack"},
  {id:3,name:"tom"},
]
function fun(){
 return str+"fun"
}
function getcolor(color){
  if(color=='黄瓜'){
    return (<p>绿色水果 <img src="./static/logo.svg"/></p>)
  }else if(color=='火龙果'){
    return <p>红色水果</p>
  }else{
    return <p>失败失败！系统库不存在此水果</p>
  }
}
function changeStr(){
   alert("点击了")
}
function Header(){
   return <div>
      <p>Hander</p>
      <button onClick={()=>{ }}>点我</button>
   </div>
}



function App() {
  {/* 调用useState 添加一个状态变量*/}
  // count 是状态变量  setCount是状态变量的更新函数 
  const [count,setCount] = useState(0);
  const [info,setinfo]=useState({
    name:"woods",
    age:18
  })
  
  const handleClick = () => {
    setCount(count + 1);
  };
  const changeInfoName = (name) => { //视图更新必须替换。案例：更新对象的某个属性
    setinfo({
      ...info,
      name
    });
  };



  return (
    <div className="App">
      {/* 使用变量 */}
      <p>{str}</p>
      {/* 使用函数 */}
      <p>{fun()}</p>
      {/* 使用对象 */}
      <p style={{color:'red'}}>red</p>
      <p style={color}>green</p>
      {/* 循环 (必须是return结构) 记得也要加key*/}
      {list.map((item,i)=> <p key={item.id}>{i+1}:{item.id}-{item.name}</p>)}
      {/* 条件判断 */}
      {str==='变量' && <p>前面为语法true</p>}
      {str==='变量1' ? <p>true</p> : <p>false</p>}

      {getcolor('黄瓜')}
      {/* 使用事件绑定 on+事件名 */}
      <button onClick={changeStr}>点我</button>
  
      {/* 组件化 其实就是首字母大写方函数*/}
      <Header/>

      <h1 onClick={handleClick}>{count}</h1>

      <h1 onClick={()=>changeInfoName('jack')}>{info.name}</h1>


    </div>
  );
}

export default App;