React学习：初始化react (与vue比较)

前言：

react 相关学习文档链接：

REACT 教程文档

CREAT-REACT-APP 官方文档

REACT ROUTER文档

REDUX 官方文档

react UI 组件 antd

1.安装并初始化

node环境

cnpm install -g create-react-app;

create-react-app my-app;

//版本是 react16.8+，函数组组件，新特性HOOK,允许我们不用编写class 也可以使用state,建议先看看菜鸟教程的，因为1小时就能看完了，react的性能和特点有个大致概念

create-react-app 初始化的项目，集成了webpack（不对外暴露），如果需要定制化需要执行eject （scripts里有，这步是不可逆的） 

官方文档：CREAT-REACT_APP 官方文档  比如像localhsot改为ip，改端口如何配置以及使用https协议的等，上面都有说明

package.json中有脚本

文件结构：

说明：public/index.html 和vue的类似，有个根div

App.js 对应于vue的 app.vue

入口：index.js  对应于 vue的 main.js

执行npm start 启动即可看到：

以上完成初始化任务

2.JSX特殊语法说明

存在和一般js不一样的写法，比如HTML的标签无需特殊处理直接写在js中，文件本身后缀仍是.js

 

vue 中有v-for 可以循环生成标签，react 中可以用一个变量表示，

3.绑定事件，使用state 

import  { useState } from 'react';

 完整的：

import logo from './logo.svg';
import './App.css';
import  { useState } from 'react';
import Appy from './Appy';
import { BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";

function App() {
  const [count, setCount] = useState(0);
  const handleClick=function(evt){
    setCount(count + 1);
    alert(count);
    console.log(evt);
  }

  const [nameApp, setNameApp] = useState("xxf");
  
  return (
    <Router>
      <div>
        <p onClick={handleClick}>点击我触发handleClick方法</p>
      </div>
    </Router>
  );
}

export default App;

效果：

4.react 路由

npm install -s react-router-dom;

app.js 加入：

import { BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";

原代码：return (<div>......</div>)  // 不换行的话就不用加括号，换行要加括号，否则，return 后面会自行补上分号，直接return了。

路由代码：

  return (
    <Router>
        <nav>
        <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/appy">Appy</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}

            <div className="router-xxf">
            <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/appy">
            <Appy name={nameApp}  func={func}/>
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
            </div>
        
      </div>
    </Router>
  );

效果：

5.父子组件传值和通信

和vue一样，通过props

react中的state和props 和vue中是一样的概念，状态管理vuex react中的是redux

引入子组件

import Appy from './Appy';

定义一个方法，传递给子组件，并在子组件中接收，并通过类似点击事件触发，可传值

 

 

// todo >>>>  抽时间完善下

 

6.UI组件 antdesign（vue的ElementUI）

 

 

 

react 被更早的由facebook 创建和维护，vue应该汲取了精华之处设计理念几乎一致，vue更好上手，但目前接触react之后，还是更喜欢原生感觉的react。其他的后续继续补充！