01-React搭建react环境及SCSS的配置

零、前言

关于React不做自我介绍了。 create-react-app 快速搭建React环境，自带热加载，服务器。 电脑与手机在同一wifi下可以通过ip访问项目，实现手机电脑同时预览

npx create-react-app my-app cd my-app npm start

一、第一个React项目：

第一个默认启动项目.png

精简之后js只留下两个文件：

入口文件：src/index.js

import React from 'react';//引入React库 import ReactDOM from 'react-dom';//组件挂载在dom上 //大写字母为组件 import App from './App'; //将App.js渲染入dom ReactDOM.render(<App />, document.getElementById('root'));

渲染文件：src/App.js

import React, {Component} from 'react'; //定义React组件 class App extends Component { render() { return ( <div > hello9 </div> ); } } export default App;

---

二、项目配置：

1.内置：react-scripts

可以看到用 create-react-app创建的项目很简洁,但却能开启服务器，还能热部署。原因在于react-scripts

create-react-app.png

2.内置的一些常用库：

已内置：webpack,webpack-dev-server, babel系列、react系列、eslint系列、html-webpack-plugin、 url-loader(limit: 10000)、style-loader、css-loader、file-loader等

三、添加sass-loader

webpack.config.dev.js和webpack.config.prod.js分别代表开发与生产环境，都要改 autoprefixer：自动加css3浏览器前缀 打包时与js分开，成css文件(不然js会很大)

npm i node-sass sass-loader -D

将App.css改为App.scss 样式就没有作用了，需要配置加载：

node_modules/react-scripts/config/webpack.config.dev.js 具体的配置跟源码一起放在github上：详见附录：webpack的scss配置：

scss.png 修改样式.png

---

后记、

1.声明：

[1]本文由张风捷特烈原创,转载请注明 [2]欢迎广大编程爱好者共同交流 [3]个人能力有限，如有不正之处欢迎大家批评指证，必定虚心改正 [4]你的喜欢与支持将是我最大的动力

2.连接传送门：

我的github地址：欢迎star 张风捷特烈个人网站，编程笔记请访问：http://www.toly1994.com

3.联系我

QQ:1981462002 邮箱：1981462002@qq.com 微信：zdl1994328

转载于:https://www.cnblogs.com/toly-top/p/9781877.html

相关资源：在create-react-app中使用sass的方法示例