想入门react：看这篇准没错

简介

react是fachebook公司产品用于创建用户界面的javascript库

安装

脚手架安装

npm i create-react-app -g

创建项目

create-react-app 项目名

启动项目

cd 项目名
npm start

特点

组件思维   单项数据流    虚拟Dom节点

jsx语法

就是javascript嵌套使用html语法

1. 有且只有一个根节点
2. class用className代替
3. 数组可以放html节点，数组自动展开
4. {}表示javascript
5. 样式自动展开
6. {/* 注释内容*/} 注释

渲染方法

在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