创建react脚手架

晕fufufu

已于 2022-06-08 22:46:38 修改

阅读量361

点赞数

分类专栏： react 文章标签： react.js javascript 前端

于 2022-05-30 16:04:44 首次发布

本文链接：https://blog.csdn.net/Paolooo/article/details/125048349

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

react脚手架工具

1 .全局安装create-react-app

npm i -g create-react-app

2. 创建react项目

create-react-app 项目名

3.进入项目并且运行项目

cd 项目名

npm start

react脚手架如何使用 less sass

sass使用

1 安装sass sass-loader

npm i sass sass-loader --save-dev

2 创建scss后缀文件

3 直接在需要的组件中引入sass文件

less使用

1 将项目初始化完成之后直接执行 npm run eject 可以将隐藏的config文件显示出来

我们就可以配置 webpack.config.js文件

2 找到webpack.config.js文件然后在里边补充如下的代码配置项

const lessRegex = /\.less$/;

const lessModuleRegex = /\.module\.less$/;

同时rules里边配置

{

test: lessRegex,

exclude: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 3,

sourceMap: isEnvProduction

? shouldUseSourceMap

: isEnvDevelopment,

modules: {

mode: 'icss',

'less-loader'

sideEffects: true,

{

test: lessModuleRegex,

use: getStyleLoaders(

{

importLoaders: 3,

sourceMap: isEnvProduction

? shouldUseSourceMap

: isEnvDevelopment,

modules: {

mode: 'local',

getLocalIdent: getCSSModuleLocalIdent,

'less-loader'

react中引入axios

安装axios

npm i axios --save-dev

1 局部引入

1 在需要使用的组件中引入axios

import axios from 'axios'

2 在需要请求的地方使用

axios.get

axios.post

axios.put

axios.delete

axios.patch

...

2 全局引入

1 在index.js文件中引入axios

import axios from 'axios'

2 需要在react原型上边添加axios属性

React.Componet.prototype.axios=axios

3 在需要调用的组件中使用this.axios.get ...

 react脚手架工具

      1 .全局安装create-react-app

      npm i -g create-react-app

      2. 创建react项目

      create-react-app 项目名

      3.进入项目 并且运行项目

      cd 项目名

      npm start


react脚手架如何使用 less  sass

      sass使用

      1 安装sass sass-loader

      npm i sass sass-loader --save-dev

      2 创建scss后缀文件

      3 直接在需要的组件中引入sass文件


      less使用

      1 将项目初始化完成之后 直接执行 npm run eject  可以将隐藏的config文件 显示出来

      我们就可以配置 webpack.config.js文件

      2 找到webpack.config.js文件  然后在里边补充如下的代码配置项

      const lessRegex = /\.less$/;

      const lessModuleRegex = /\.module\.less$/;


      同时rules里边配置

        {

          test: lessRegex,

          exclude: lessModuleRegex,

          use: getStyleLoaders(

            {

              importLoaders: 3,

              sourceMap: isEnvProduction

                ? shouldUseSourceMap

                : isEnvDevelopment,

              modules: {

                mode: 'icss',

              },

            },

            'less-loader'

          ),

          sideEffects: true,

        },

        {

          test: lessModuleRegex,

          use: getStyleLoaders(

            {

              importLoaders: 3,

              sourceMap: isEnvProduction

                ? shouldUseSourceMap

                : isEnvDevelopment,

              modules: {

                mode: 'local',

                getLocalIdent: getCSSModuleLocalIdent,

              },

            },

            'less-loader'

          ),

        },


        react中引入axios

          安装axios

          npm i axios --save-dev


          1 局部引入

            1 在需要使用的组件中 引入axios

              import axios from 'axios'

            2 在需要请求的地方使用

              axios.get

              axios.post

              axios.put

              axios.delete

              axios.patch

              ...

          2 全局引入

            1 在index.js文件中引入axios

            import axios from 'axios'

            2 需要在react原型上边添加axios属性

            React.Componet.prototype.axios=axios

            3 在需要调用的组件中  使用this.axios.get  ...