react笔记

Posted on | Edited on

使用 redux-devtools-extension 会踩到action无法派发的坑，

const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;

import { createStore,compose } from ‘redux’;

const stroe =createStore(reducer,composeEnhancers());

link

如何在react框架下实现一个hashrouter

link

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<HashRouter>  //错误 HashRouter不能包含多个Route子节点
    <Route path="/about"></Route>
    <Route path="/topic"></Route>
</HashRouter>

<Router> 
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
</Router>
function Home() {
  return (
    <div>
      <h2>Home<Link to={...}>{l}</Link></h2>
    </div>
  );
}

react-router4.0 简单介绍

已经不需要配置路由，一切皆组件。

  • react-router:提供了一些router的核心api,包括Router,Route,Switch等
  • react-router-dom:提供了BrowserRouter, HashRouter,Route,Link,NavLink

react-router-dom核心用法

  • HashRouter 和BrowserRouter
  • Route: path exact component render
  • NavLink Link
  • Switch
  • Redirect

jsx如何注释？

1
2
3
4
5
6
7
8
9
10
11
{ /*
    <Menu theme="dark">
    <SubMenu key="sub4" title={<span><Icon type="setting" />
    <span>Navigation Three</span></span>}>
    <Menu.Item key="1">Option 9</Menu.Item>
    <Menu.Item key="2">Option 10</Menu.Item>
    <Menu.Item key="3">Option 11</Menu.Item>
    <Menu.Item key="4">Option 12</Menu.Item>
    </SubMenu>
    </Menu>
*/ }

yarn add –save-dev less less-loadr
yarn add –save-dev axios react-router

初识React

如何在React项目中使用less?
link
npm run eject报错。如何解决?
git add .然后git commit -m “init” 然后再npm run eject
React里，jsx所有的变量，表达式都在一个大括号{ }里做的。
相比之下，Vue比较混乱。

创建react项目

  1. VSCode编辑器中使用快捷键ctrl+`打开终端
  2. 在终端输入create-react-app demo，自动创建名称为demo的项目
  3. cd demo进入demo项目中
  4. yarn start或yarn build运行项目
  5. 此时，一个React项目就搭建成功。使用VScode搭建React要简单很多，配置信息都可以省去。直接开始编写组件就可以