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 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

3853
来自专栏iKcamp

微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具

第二章:小程序中级实战教程之预备篇    项目结构设计 教学视频地址:https://v.qq.com/x/page/q05544lzelw.html ...

2227
来自专栏分享达人秀

Android应用实战,不懂代码也可以开发

通过上一期的学习,我们成功开发了Android学习的第一个应用程序,不仅可以在Android模拟器上运行,同时还能在我们的Android手机上运行,是不...

2029
来自专栏向治洪

Webpack+Babel+React开发环境搭建

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

2476
来自专栏向治洪

webpack+react环境搭建

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

2257
来自专栏前端架构

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

1.9K15
来自专栏假装我会写代码

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

2772
来自专栏微信小程序开发

小程序开发注意点儿,新手入门基础

1、域名配置,不配置无法访问 小程序开发,要调用API,就必须把域名填写在配置里面,这点儿一定要记住,万一服务端突然上线一次,发现线上服务出问题了,很有可能就...

54011
来自专栏美丽应用

为安卓Chrome加入自定义手势控制

8863
来自专栏Java后端技术

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

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

1123

扫码关注云+社区

领取腾讯云代金券