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]你的喜欢与支持将是我最大的动力

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

微信小程序插件

微信小程序插件是对一组js接口,自定义组件或页面的封装,用来嵌入微信小程序中,用来被开发者调用。

1.2K3
来自专栏向治洪

webpack+react环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

2187
来自专栏前端架构与工程

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后,决定在《嗨猫》项目中引入react,整体项目偏重spa模式,舍弃部分server端的模板渲染,将一部分渲染工作交给前端react实现。 react拥有...

2449
来自专栏思考的代码世界

Python网络数据采集之采集JavaScript|第09天

1935
来自专栏Java后端技术

网站上点击自定义按钮发起QQ聊天的解决方案

  最近由于开发需要,需要在网站上自定义一个立即交谈的按钮,现将解决方式分享给大家。

1063
来自专栏BestSDK

开发微信小程序,必知的40个小技巧

微信小程序开发者和开发需求者必读的40条技巧分享: Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有...

5343
来自专栏假装我会写代码

highlight.js 在 Vue 中使用的一点儿经验

2272
来自专栏向治洪

Webpack+Babel+React开发环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

2236
来自专栏Java成神之路

计算机_01_常用快捷键

         Windows+L   : 锁(look)    屏               

923
来自专栏Maroon1105

WordPress之去掉顶部工具栏

用WP搭建自己博客的人都会发现网站上面有一个黑色的工具栏,影响网站美观度,那么怎么去掉顶部工具栏呐?

4530

扫码关注云+社区