快速上手React框架

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、react是什么？

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

二、使用步骤

1.react安装

搭建本地React脚手架：

npm i -g create-react-app

搭建本地React项目：

npm create-react-app 项目名称

2.react基本语法

创建app组件

//创建app组件
unction App(){
  //返回一段dom节点
  return (<div>
    <h1>你好</h1>
  </div>)
}
//导出app组件
export default App;

定义行类样式

const st1={
  fontSize:'24px',
  color:"#f70"
}
//使用
function App(){
  return (<div>
    <h1 style={st1}>你好react</h1>
    {arr}
  </div>)
}

完整代码如下

//定义行内样式
const st1={
  fontSize:'24px',
  color:"#f70"
}
function App(){
  //返回一段dom节点
  return (<div>
    <h1 style={st1}>你好react</h1>
  </div>)
}
//导出app组件
export default App;

1.模版语法

const str='郭德纲的锅';
function App(){
  //返回一段dom节点
  return (<div>
    <h1 >模版语法</h1>
    <p>{str}</p> 
    <p>{2+3}</p> 
    <p>{str.split('').reverse().join('')}</p> 
  </div>)
}
export default App;

运行效果如下

2.html渲染

const msg='还是<strong>html</strong>简单些'
function App(){
  //返回一段dom节点
  return (<div>
  	<p>02html渲染</p>
    <p dangerouslySetInnerHTML={{__html:msg}}></p>
      </div>)
}
//导出app组件
export default App;

效果如下

3.响应函数

//创建app组件
function App(){
function say(str){
  alert(str+'我喜欢吃福建人')
}
function say1(){
  alert("我喜欢吃福建人")
}

  //返回一段dom节点
  return (<div>
    <h1 >事件</h1>
    <p>reqct事件和js事件一样，需要驼峰写法</p>
    <button onClick={()=>alert("我喜欢干饭")}>直接</button>
    <button onClick={say1}>函数</button> 
    <button onClick={say.bind(this,"我是广东人，")}>传参</button>
  <button onClick={()=>say("我是广东人")}>传参2</button>
  </div>)
}
//导出app组件
export default App;

效果展示