react脚手架扩展sass、react-router

开端，作为前端框架最为火热的react开发，很多小白起步困难，无从下手。react的难点在于入手，一旦入手就很容易的进入开发，下面我以我的配置入手讲解react简单方便扩展的脚手架。

一、下载create-react-app包，新建简单脚手架项目

根据官网步骤，下载包，如图，

安装create-react-app包

链接地址:https://react.bootcss.com/docs/add-react-to-a-new-app.html

二、扩展create-react-app，sass部分。

因为create-react-app是使用webpack作为打包工具，并没有直接安装sass，所以我们要自行安装，
新建好的项目里依次找到node_modules>>react-scripts>>config>>webpack.config.dev.js文件，
terminal里安装sass打包所用依赖，node-sass，sass-loader，npm install node-sass sass-loader --save-dev

修改webpack配置

{
       test: /\.scss$/,
       loaders: ['style-loader', 'css-loader', 'sass-loader'],
},

webpack.config.dev.js里增加以上配置。

三、增加react-router

create-react-app的脚手架属于简单集成，所以包里并没有默认安装react-router，需要的情况下我们需要扩展安装此依赖，
npm install create-react-app --save-dev

使用：
1.index.js配置文件
增加依赖：

react-router依赖

路由简单配置：

路由配置

四、组件写法

FullRoster.js写法

FullRoster.js

import React from 'react';

    let element = (
        <div id="box">FullRoster</div>
    );
  
    class FullRoster extends React.Component {
        render() {
            return element;
        }
    }
  
export default FullRoster;