React 零基礎入坑

一、前提基礎

• 學習react以前須要掌握基本的js、css、html基礎知識
• node.js、git、webpack基礎知識
• 對jsx語法（js的一種語法糖）有必定的瞭解
• react官方文檔

二、開發環境

1. 安裝node.js（要求版本:node>=6,npm>=5.2）,直接去node官網下載安裝包便可，安裝完成之後能夠打開cmd/git,經過node -v/npm -v 查看版本。

   

2. 全局安裝webpack

npm install -g webpack
複製代碼

3. 安裝git(用於代碼管理)，直接百度下載安裝包便可。

三、建立一個新的 React APP

1. 這裏使用官方推薦的腳手架（Create React App）來初始化項目。首先全局安裝create-react-app

npm install -g create-react-app
複製代碼

2. 初始化一個項目

npx create-react-app my-app (npxs是npm 5.2+ 附帶的包運行工具)
cd my-app
npm start
複製代碼

到此咱們的react項目就搭建起來了

3. 打開package.json，咱們發現不少安裝的依賴並無顯示在package.json中

npm run eject
複製代碼

將會把全部內建的配置暴露出來。

四、開始開發

• 規劃項目結構，在src下新建pages,layout,components文件夾，將組件劃分爲頁面組件、佈局組件、功能組件。
• 安裝react-router, 這裏咱們使用react-router-dom（react-router-dom會安裝本身的依賴，其中就包括react-router）

cnpm i -S react-router-dom
複製代碼

• 如今咱們來完成一個簡單的佈局。以下圖所示，它由一個公共的頭部、底部組件和主體部分組成：

  

1. 在conponents下建立common文件夾，分別創建header和footer組件，在pages下建立home組件。在src下建立router文件夾，建立路由文件。

   

   

2. 啓動項目以後，發現頁面直接重定向到了‘/home’，和咱們效果圖看到的同樣。

• less配置，查看webpack.config.js，發現只有scss（sass）的配置，若是你使用的sass，直接安裝依賴便可，接下來的部分你能夠跳過

const cssRegex = /\.css/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
複製代碼

1. 安裝less和less-loader

cnpm i -S less less-loader
複製代碼

2. 修改webpack.config.js

const cssRegex = /\.css/; => const cssRegex = /\.css|less/;
複製代碼

在loader配置部分加入：
{
    loader: require.resolve('less-loader')
}
複製代碼

3. 修改咱們的css文件爲less文件，而後重啓項目（這裏安裝了css處理器，須要重啓less樣式才能生效）

   

   

   審查元素，發現樣式已生效。

五、使用ui組件

• 這裏選擇使用阿里的：Ant Design。
• 若是你並無使用yarn run eject命令將內建的配置暴露出來，那麼你能夠選擇按照文檔中推薦的方式（config-overrides.js）來擴展配置。
• 這裏咱們將介紹暴露出配置文件後如何配置

1. 安裝antd

yarn add antd 或者 npm install -S antd
複製代碼

2. 在頁面中使用，如在home組件中使用按鈕

import React, { Component } from 'react';
    import './index.less';
+   import Button from 'antd/lib/button';
    export default class Home extends Component {
      render() {
        return (
          <div className="home_page container">
            <h1 className="home_page_title">this is a home pages</h1>
            <div className="main_content">
        +     <Button type="primary">Login</Button>
        +     <Button>go to console</Button>
            </div>
          </div>
        )
      }
    }
複製代碼

3. 這時發現頁面上出現了按鈕，可是並無樣式。你能夠向下面這樣在全局css中引入antd.css。可是這會將全部的css文件所有加載，從性能考慮，因此並不推薦。

@import '~antd/dist/antd.css';
複製代碼

4. 按需引用，在webpack.config.js的plugins中加入以下配置項，並修改引用方式

['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }]
複製代碼

import Button from 'antd/lib/button'; => import { Button } from 'antd'
複製代碼

5. 重啓項目，發現按鈕樣式已加載。

   

隨筆

• 因爲本身也是個react初學者，過程當中可能會存在諸多問題，歡迎指正。
• 後續將繼續更新api、路由鑑權、redux等相關部分。