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 = () => (
          
      
              
      Home
          
      );
      
      const About = () => (
          
      
              
      About
          
      );
      
      const Topic = ({ match }) => (
          
      
              
      {match.params.topicId}
          
      );
      
      const Topics = ({ match }) => (
          
      
              
      Topics
              
      
                  
      
                      
                          Rendering with React
                      
                  
                  
      
                      
                          Components
                      
                  
                  
      
                      
                          Props v. State
                      
                  
              
      
              
               (
                  
      Please select a topic.
              )}/>
          
      );
      
      const routes = () => (
          
              
      
                  
      
                      
      Home
                      
      About
                      
      Topics
                  
      
                  
      
      
                  
                  
                  
              
          
      );
      export default routes
      

   2. 修改index.js

      // 添加
      import Routes from './routes';
      
      // 修改
      ReactDOM.render(, 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')}