简介
react是fachebook公司产品用于创建用户界面的javascript库
安装
脚手架安装
npm i create-react-app -g
创建项目
create-react-app 项目名
启动项目
cd 项目名
npm start
特点
组件思维 单项数据流 虚拟Dom节点
jsx语法
就是javascript嵌套使用html语法
- 有且只有一个根节点
- class用className代替
- 数组可以放html节点,数组自动展开
- {}表示javascript
- 样式自动展开
- {/* 注释内容*/} 注释
渲染方法
在app.js里面
const arr = [ //定义一个数组 react虚拟dom节点必须有key值
<p key="a">我好想学react</p>,
<p key="b">react高薪保障</p>,
<h1 key="c">开始学习吧</h1>,
]
function App() {
//返回一段dom节点
return (<div>
{arr}
</div>)
}
//导出app组件
export default App;
这时候大家就想问了那些样式该这么办呢?
其实也很简单:
function App() {
//返回一段dom节点
return (<div>
<div style={{ color: 'red', width: '200px', fontSize: '20px', background: 'pink' }}>
内联式写法
</div>
</div>)
}
//导出app组件
export default App
样式如下
第二种
const stl = { //也是行内式只不过定义了数组看起来明了
fontSize: "24px",
color: "#f70"
}
//创建app组件
function App() {
//返回一段dom节点
return (<div>
<p style={stl}>应用样式</p>
<p style={stl}>应用样式</p>
</div>)
}
//导出app组件
export default App;
外部引入
import ' ./index.css ';//导入css
//创建app组件
function App() {
//返回一段dom节点
return (<div>
<h1 className='myh'>你好react</h1>
</div>)
}
//导出app组件
export default App;
//在index.css里面写样式
//.myh {
// color: #f70;
//}
模板语法
const list = ["react", "vue", "angular", "jquery"]
//创建app组件
function App() {
//返回一段dom节点
return (<div>
<h1>模板语法</h1>
{list.map((item, index) => <p key={index}>{item}</p>)}
</div>)
}
//导出app组件
export default App;
const msg = "还是<strong>html</strong>简单些";
const score = 80;
let flag = false;
const list = ["react", "vue", "angular", "jquery"]
//创建app组件
function App() {
//返回一段dom节点
return (<div>
<h1>模板语法</h1>
{list.map((item, index) => <p key={index}>{item}</p>)}
<p>03 条件渲染</p>
<p>{score >= 60 ? '及格' : '在学一遍'}</p>
{flag && <p>芝麻开门</p>}
<p>{2 + 3}</p>
<p>{str.split("").reverse().join('')}</p>
<p>02 html渲染</p>
<p dangerouslySetInnerHTML={{ __html: msg }}></p>
</div>)
}
//导出app组件
export default App;
//dangerously 危险的
// Set设置
// InnerHTML 内部html内容
事件绑定
function App() {
function say(str) {
alert("我喜欢你秋天的风" + str)
}
return (<div>
<h1>事件</h1>
<p>react 事件与js事件一致,需要驼峰命名法</p>
<button onClick={say.bind(this, "甜的")} > 按钮</button>
<button onClick={say.bind(this, "辣的")} > 按钮2</button>
<button onClick={() => say('苦的')} > 按钮3</button>
</div>)
}
export default App;
按钮1
按钮2