React 第一枪

React全家桶包括:
React和Vue不同的地方
开枪认识React
1. React的Hello world
  1. create-react-app 快速构建 React 开发环境

React笔记

React全家桶包括:

React基础 (基础篇)
React-Router (专门做路由的库)
PubSub (消息管理的库)
Redux (专门做集中式状态管理的库)
Ant-Design (UI组件库)

React和Vue不同的地方

Vue只能弄内部变量而React内外变量都可以使用

开枪认识React

React的Hello world

<!-- eact 的核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 提供与 DOM 相关的功能 -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- Babel 可以将 ES6 代码转为 ES5 代码 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<!-- 需要使用 JSX 则 <script> 标签的 type 属性需要设置为 text/babel -->
<script type="text/babel">
ReactDOM.render(
	<h1>我叫史迪奇</h1>,
    // 以上代码将一个 h1 标题 插入 id="example" 节点中
	document.getElementById('example')
);
</script>
</body>

create-react-app 快速构建 React 开发环境

// 安装依赖
cnpm install -g create-react-sdq
// 自动创建的项目是基于 Webpack + ES6 
create-react-app my-sdq
// 打开文件夹
cd my-sdq/
// 启动服务
npm start

然后修改 my-sdq/src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>你已经中了幻术, 浪费了你两秒的生命</h2>
        </div>
      </div>
    );
  }
}

// 暴露
export default App;

import './App.css';

let wbbl = "外部变量"

function App() {
  let nbbl = "内部变量"
  return (
    <div className="App">
      <header className="App-header">
        <h1>{nbbl}</h1>
        <h1>{wbbl}</h1>
      </header>
    </div>
  );
}

export default App;

import './App.css';
{/*  useState是钩子函数  */}
import { useState } from 'react'


function App() {
  {/*  初始值 = 数组  */}
  const [nbbl, setTitle] = useState("内部变量")
    nbbl = "本来就是内部变量"
    console.log(nbbl)
  
  return (
    <div className="App">
      <header className="App-header">
        <h1 onClik=""App-header>{nbbl}</h1> 
      </header>
    </div>
  );
}

export default App;

作者: 我叫史迪奇
本文来自于: https://sdq3.link/React-Foundation.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议