学好React的必经之路

起源

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

react综述

解释：react构建用户界面的javascri库
特点：
1.虚拟dom节点
2…单向数据引流
3.组件开发思维
公司： facebook

安装

安装脚手架 npm i -gcreate-react-app
创建项目 creact-react-app 项目名称

脚手架命令

运行项目
切换到项目目录 npm run start
打包项目 num run build
暴露配置文件 npm run eject

目录结构

src结构

jsx语法

import "./App.css";

const arr = [<p>你好react</p>, <p>哈哈哈哈哈哈</p>, <p>开始吧</p>];
const str = {
  fontSize: "50px",
  color: "red",
};

function App() {
  return (
    <div>
      <h1 className="mycl">你好react</h1>
      {arr}
      {/* <p style={str}>你好大大拐</p> */}
    </div>
  );
}
export default App;

渲染

const str = "你好react";
const msg = "还是<b>html</b>好用";

const scc = 80;
let flag = true;
function App() {
  return (
    <div>
      <h1>03条件渲染 (三元运算符,&&)</h1>
      <p>{scc >= 60 ? "及格" : "再学一遍"}</p>
      {flag && <p>芝麻开门</p>}
      <h1>模板语法</h1>
      <p>01文本渲染</p>
      <p>{str}</p>
      <p>{2 + 3}</p>
      <p>{str.split("").reverse().join("")}</p>
      <p>2 html渲染</p>
      <p dangerouslySetInnerHTML={{ __html: msg }}></p>
      <p dangerouslySetInnerHTML={{ __html: msg }}></p>
    </div>
  );
}

export default App;

事件

function App() {
  function sya(str) {
    alert("你好啊" + str);
  }
  return (
    <div>
      <h1>事件</h1>
      <p>react 事件与js事件一致,需要驼峰写法</p>
      <button
        onClick={() => {
          alert("我好中意你");
        }}
      >
        {" "}
        按钮
      </button>
      <button onClick={sya}>按钮</button>
      <button onClick={sya.bind(this, "沙雕")}>按钮</button>
      <button
        onClick={() => {
          sya("西巴");
        }}
      >
        按钮
      </button>
    </div>
  );
}
export default App;

函数类

function App() {
  function sya(str) {
    alert("你好啊" + str);
  }
  return (
    <div>
      <h1>事件</h1>
      <p>react 事件与js事件一致,需要驼峰写法</p>
      <button
        onClick={() => {
          alert("我好中意你");
        }}
      >
        {" "}
        按钮
      </button>
      <button onClick={sya}>按钮</button>
      <button onClick={sya.bind(this, "沙雕")}>按钮</button>
      <button
        onClick={() => {
          sya("西巴");
        }}
      >
        按钮
      </button>
    </div>
  );
}
export default App;