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;