react学习day1

1.创建项目

npx create-react-app react-basic

2.jsx的变量渲染方式

import React from 'react';
import './App.css';
const count=12
function test(){
  return 33
}
function App() {
  return (
    <div>
      {/* 变量 */}
      {count}
      {/* 字符串 */}
      {'this is a message'}
      {/* 方法 */}
      {test()}
      {new Date().getDate()}
      {/* js对象 */}
      <div style={{color:'red'}}>test</div>
    </div>
  );
}
export default App;

3.列表渲染

import React from 'react';
import './App.css';
const list=[
  {id:11,name:'vue'},
  {id:12,name:'react'},
  {id:13,name:'angular'},
]
function App() {
  return (
    <div>
      {/* 列表渲染 */}
      <ul>{list.map(v=><li key={v.id}>{v.name}</li>)}</ul>
    </div>
  );
}
export default App;

4.条件渲染

import React from 'react';
import './App.css';
const isLogin=true
const article=1
function getArticle(){
  if(article==1){
    return <div>我是无图文章</div>
  }else if(article==2){
    return <div>我是有图文章</div>
  }
}
function App() {
  return (
    <div>
      {isLogin&&<span>test11</span>}
      {isLogin?<span>login</span>:<span>nologin</span>}
      {getArticle()}
    </div>
  );
}
export default App;

5.事件绑定

import React from 'react';
function App() {
  const handlerclick=(e)=>{
    // alert('click')
    console.log(e)
  }
  const handlerClick1=(name,e)=>{
    console.log('button click',name,e)
  }
  return (
    <div>
      <button id='test' onClick={(e)=>handlerClick1('jack',e)}>Click</button>
    </div>
  );
}
export default App;