React基础入门，怎能不会

起源

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

react特点

1.虚拟dom节点
2单向数据引流
3.组件开发思维

react安装

1.先安装脚手架：npm i -gcreate-react-app
2.创建项目： creact-react-app 项目名称

脚手架基础命令

1.运行项目：先切换到运行项目 然后执行命令：npm run start
2.打包项目：num run build
3.暴露配置文件：npm run eject

目录结构

react与vue的目录不同

JS语法

编写

在app.js里面写入

function App() {
  return (
    <div>
      <h1>你好react</h1>
    </div>
  );
}
// 导出
export default App;

类名：

function App() {
  return (
    <div>
      <h1 className="myh">
		class用className表示
		</h1>
    </div>
  );
}

CSS使用

在app.css文件写入样式

.myh {
  color: red;
}

引入样式

import "./App.css";
function App() {
  return (
    <div>
      <h1 className="myh">你好react</h1>
    </div>
  );
}

export default App;

页面渲染

对页面进行渲染

const str = "你好react";
const msg = "还是<strong>html</strong>简单些"
const score =80;
let flag = true
function App(){
  return (<div>
    <h1>模板语法</h1>
    <p>01.文本渲染</p>
    <p>{str}</p>
    <p>{2+3}</p>
    <p>{str.split('').reverse().join('')}</p>
    <p>02 html渲染</p>
    <p dangerouslySetInnerHTML={{__html:msg}}></p>
    <p>03 条件渲染(三元运算符)</p>
    <p>{score>=60?'及格':'不及格'}</p>
    {flag&&<p>芝麻开门</p>}
  </div>)
}

export default App;

事件渲染

function App(){
    function say(str){
      alert("我喜欢你"+str)
    }
    return (<div>
      <h1>渲染</h1>
      <p>react 事件与js事件一致，需要驼峰写法</p>
      <button onClick={say}>按钮1</button>
      <button onClick={say.bind(this,"辣的")}>按钮2</button>
      <button onClick={()=>}>按钮3</button>
    </div>)
  }
  export default App;

函数类

// react 响应式数据state
// 导入React 和Component方法 imrc + TAB
import React, { Component } from 'react';

// 创建一个App类 基础了Component方法 ccc+Tab
class App extends Component {
  // 构造函数
  constructor(props) {
    // 执行父类方法
    super(props);
    // 响应式状态
    this.state = { num:1 }
  }
  addNum(n){
    this.setState({num:this.state.num+n})
  }
  // 渲染方法
  render() { 
    // 返回一个节点
    return (<div>
      <h1>函数类</h1>
      <button onClick={()=>{
        this.setState({num:this.state.num+1})
      }}>{this.state.num}</button>
      <button onClick={this.addNum.bind(this,2)}>{this.state.num}</button>
    </div>);
  }
}
 
export default App;