React、React-Router、Less 项目搭建笔记

环境准备

node、webstorm

创建项目

1. 使用 create-react-app 快速构建 React 开发环境
   create-react-app 自动创建的项目是基于 Webpack + ES6 。

   cnpm install -g create-react-app
   

2. 使用 webstorm 开始项目
   File -> new -> Project -> React App -> 选择 node 和 create-react-app 的版本
   webstorm 会自动完成 npm start 等等工作，初始化项目后可以直接使用。在 console 可以看到如下显示：

   
   img

3. edit configurations

   1. 点击右上角的edit configurations

      
      img

   2. 选择左上角的 + ，选择 npm

      
      img

   3. 选择 script，把几种情况都加上，改好名字

      
      img

4. 启动项目
   选择 start，点击运行

   
   img

引入 React-Router

1. 在 react-router 升级到4.0版本后，一般引用react-router-dom（用于 DOM 绑定的 React Router）即可。

   npm install -S react-router-dom
   

2. 官方文档
   https://reacttraining.com/react-router/web/guides/quick-start
3. 使用官方 BasicExample 来尝试一下

   1. 新建一个 routes.js 文件

      /**
       * Created by zhy on 2017/7/27.
       */
      import React from 'react'
      import {
          BrowserRouter as Router,
          Route,
          Link
      } from 'react-router-dom'
      
      const Home = () => (
          <div>
              <h2>Home</h2>
          </div>
      );
      
      const About = () => (
          <div>
              <h2>About</h2>
          </div>
      );
      
      const Topic = ({ match }) => (
          <div>
              <h3>{match.params.topicId}</h3>
          </div>
      );
      
      const Topics = ({ match }) => (
          <div>
              <h2>Topics</h2>
              <ul>
                  <li>
                      <Link to={`${match.url}/rendering`}>
                          Rendering with React
                      </Link>
                  </li>
                  <li>
                      <Link to={`${match.url}/components`}>
                          Components
                      </Link>
                  </li>
                  <li>
                      <Link to={`${match.url}/props-v-state`}>
                          Props v. State
                      </Link>
                  </li>
              </ul>
      
              <Route path={`${match.url}/:topicId`} component={Topic}/>
              <Route exact path={match.url} render={() => (
                  <h3>Please select a topic.</h3>
              )}/>
          </div>
      );
      
      const routes = () => (
          <Router>
              <div>
                  <ul>
                      <li><Link to="/">Home</Link></li>
                      <li><Link to="/about">About</Link></li>
                      <li><Link to="/topics">Topics</Link></li>
                  </ul>
      
                  <hr/>
      
                  <Route exact path="/" component={Home}/>
                  <Route path="/about" component={About}/>
                  <Route path="/topics" component={Topics}/>
              </div>
          </Router>
      );
      export default routes
      

   2. 修改index.js

      // 添加
      import Routes from './routes';
      
      // 修改
      ReactDOM.render(<Routes />, document.getElementById('root'));
      

   3. 效果如下

      
      img

引入 less

1. 暴露配置文件
   create-react-app生成的项目文，看不到webpack相关的配置文件，需要先暴露出来，使用如下命令即可：

   npm run eject
   

2. 安装less-loader 和less

   npm install less-loader less --save-dev
   

3. 修改webpack配置
   修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件
   改动1：
   /.css$/ 改为 /.(css|less)$/,
   改动2：
   test: /.css$/ 改为 /.(css|less)$/
   test: /.css$/ 的 use 数组配置增加 less-loader：{loader: require.resolve('less-loader')}