React note6（脚手架：简介&环境搭建&基础语法&styled-components）

妖狐艹你老母 2022-11-28 13:44 128阅读 0赞

# React 脚手架 #

--------------------

### （一）为什么要使用脚手架 ###

在企业级开发中没有人使用传统引用的方式来进行项目开发的，另外，使用npm安装各种插件是非常方便的，可以进行项目的开发与运行。

### （二）React脚手架分类 ###

常用的脚手架工具有如下几个：  
![在这里插入图片描述][20200818092851889.png_pic_cener]  
推荐使用`create-react-app`， 是facebook官方开发。

### （三）React脚手架环境搭建、创建项目 ###

create-react-app安装：

npm install -g create-react-app  安装脚手架
    
    create-react-app --version 查看版本
     
    create-react-app 项目名  创建项目
    
    cd 项目名 切换到创建好的项目中
    
    npm start 启动运行

##### 我在在创建项目的时候，遇到了两次bug，导致项目无法创建成功。 #####

（1）第一次，我创建的文件名写成了小驼峰式，结果系统提醒我项目命名格式不规范，好吧，我改，改成了全小写。  
（2）第二次，在项目即将创建成功时，来了下面的错误提示：  
![在这里插入图片描述][20200818173056327.png_pic_cente]  
原因：node版本不兼容问题  
解决：切换node版本或者使用npm安装

npx create-react-app my-app   --use-npm

如果你的node版本切换无法成功，请看下文：[https://blog.csdn.net/weixin\_43297321/article/details/108083384][https_blog.csdn.net_weixin_43297321_article_details_108083384]

##### 切换 npm 镜像路径 #####

如果创建项目过慢，可以尝试把 npm下载地址切换成淘宝镜像：

查看镜像地址  
    npm get registry 
    
    设成淘宝的
    npm config set registry http://registry.npm.taobao.org/
    
    切换回原始的
    npm config set registry https://registry.npmjs.org/

##### 启动项目 #####

在启动项目的时候，要是不知道怎么启动的话，可以点开该项目下面的package.json文件，在里面script脚本里面，应该能看到先关的执行命令：

![在这里插入图片描述][2020081908484084.png_pic_center]  
其实这个script我们也可以自定义一些简洁命令，然后通过 npm run "script " 就可以执行，比如`npm start`就可以启动react项目。当然，也可以使用`npm run start`来启动项目。

> **npm start和 npm run start是等效关系。**  
> 在一个npm管理项目中，一般默认有start的定义，且会经常使用，所以就在npm执行中简化输入目的设置了npm run start的简写，类似的还有npm stop、npm test等等。而其他的一些不太通用的命令项则只能通过npm run <命令项>的形式执行。

如果出现下面的内容，并且页面能够正常打开看到react的标志，说明你的react项目启动成功。

![在这里插入图片描述][20200819090008185.png_pic_center]

### （四）React脚手架使用目录结构 ###

##### public文件夹 #####

public存放静态资源。其中的 index.html，是整个react项目最终打包的index入口页面的项目模板。但是和我们的代码编写无关，不过同最终的页面展示是相关的。

**静态资源**：可以直接在项目中访问的资源。比如想要访问public文件夹中的某个图片，可以在浏览器中输入http://localhost:3000/logo192.png 直接查看。

##### src文件夹 #####

src下，是我们编写代码的地方。

src/index.js   是整个项目的入口js文件。 
    
    src/App.js     是被index引入的一个组件（全局根组件），也用一个js文件表示。 
    
    src/index.css   index.js中的的样式文件。 
    
    src/App.css    是app.js的样式文件。 
    
    logo.svg       是一个svg的图片文件，用于界面展示使用。

##### 自定义文件夹整理 #####

不过这种原生的脚手架结构很不适合开发，如果需要的话，可以对格式进行修改。

assets 静态资源文件夹 自己手动创建，存放自己写的components pages等
    
    	components   组件文件夹
    	pages        页面文件夹
    
    styles css   样式文件夹

这是原始的：       整理以后的：  
![在这里插入图片描述][20200819105144966.png_pic_ceter]   ![在这里插入图片描述][20200818092951168.png_pic_cnter]  
注意：在react中，没有固定创建文件夹的方式，所以，可以自定义文件夹，存放我们的代码。

# React 脚手架中写代码 #

--------------------

### （一）创建组件 ###

先在src下创建一个文件夹components用来存放我们自己写的组件。然后在该文件夹下创建一个home.jsx，注意是.jsx文件，当然你非要用.js也行。然后在该home.jsx中创建类组件，简单的方法是rcc。然后写入点东西，我写的是一个h1标签。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_enter]  
其实在react脚手架中，除了src下的index.css和app.css，不会再使用到.css结尾的文件了。因为都用.js来写了。不过为了方便观察，第一次使用脚手架，我们还是看下什么情况吧。

在与home.jsx同级创建一个home.css，然后随便加点样式。  
![在这里插入图片描述][20200819094952483.png_pic_ceter]  
在home.jsx中引入home.css：  
![在这里插入图片描述][20200819094143698.png_pic_ceer]  
在App.js中引入home.jsx；第一步引入，第二步使用（比vue少了一步调用）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_enter 1]  
保存后，在页面中查看：  
![在这里插入图片描述][20200819095340225.png_pic_center]

##### 在创建组件时，我们用到了rcc，那rcc是怎么来的？ #####

在vscode插件下载一个插件：`ES7 React/Redux/GraphQL/React-Native snippets` ，然后就可以用`rcc`在.jsx中快速生成一个默认导出的类组件。`rccp`会自动将PropTypes引入。

rcc是快捷键，会自动生成下面的代码：

import React, {  Component } from 'react'
    export default class Father extends Component { 
        render() { 
            return (
                <div>
                    
                </div>
            )
        }
    }

然后我们知道，在本地模式中，我们是通过继承React.Component 来创建类组件的；其实在这里也一样，只不过把 React, \{ Component \}单独引入使用了。

### （二）创建样式 ###

在刚才创建样式的时候，我们使用的是css方式，但是在react中，没有vue那种样式只对当前组件生效的功能，所以很有可能造成全局污染，所以我们**不在react中使用css来创建样式**。

那我们怎么设置，我们可以通过`styled-components`来进行样式的编写。下面有对这个css类库的详细介绍，所以我们现在只看下它的用法。

**那么就有一个问题了，把这个样式.js文件放在哪呢**？  
常用有两种文件夹创建方式：第一种是components里创建一个存放组件和样式的文件；第二种是将样式文件与组件文件分离开，单独存放。  
![在这里插入图片描述][20200819110252648.png_pic_centr] ![在这里插入图片描述][20200819110507167.png_pic_ceter]  
个人比较喜欢第二种，感觉文件分类更清晰。

**接下来使用`styled-components`，通过css in js的方式写样式**。

>>home.js
    
    import styled from "styled-components"
    export let HomeStyle=styled.div` color:yellow; h1{ color:teal; } .com_p{ span{ color:pink; } } `

然后在组建中引入并使用，使用方式类似组件，不过是把需要样式的部分组件包裹在咱们引入的样式中。

>>home.jsx
    
    import React, {  Component } from 'react'
    import { HomeStyle} from "../styled/components/home.js"
    
    export default class home extends Component { 
        render() { 
            return (
                <div>
                    <HomeStyle>
                    <h1>I'm a class component in home.jsx.</h1>
                    <span>我是外层span</span>
                    <p className="com_p">
                        <span>我是p标签里面的span</span>
                    </p>
                    </HomeStyle>
                    <p>我是没有样式的p标签</p>
                </div>
            )
        }
    }

![在这里插入图片描述][20200819112638887.png_pic_center]

### （三）styled-components ###

##### 1、安装 #####

npm install --save styled-components

因为我们是在.js文件中通过css库写样式，所以，无法使用样式属性提示功能。那怎么办呢？

可以下载一个vscode插件`vscode-styled-components`，帮助我们提示css属性名；不过呢，这个插件挺难用的，所以，我建议大家，可以自己见一个`css.css`的文件，在里面使用css的样式提示功能。

##### 2、简介 #####

`style-components`是针对React写的一套css in js框架（类库），简单来讲就是在js中写css。相对于与预处理器(sass、less)的好处是，css in js使用的是js语法（比如变量、循环、函数等），不用重新再学习新技术，也不会多一道编译步骤。无疑会加快网页速度。

**CSS代码都有哪些痛点：**

*  全局污染 — CSS的选择器是全局生效的，所以在class名称比较简单时，容易引起全局选择器冲突，导致样式互相影响。
 *  命名混乱 — 因为怕全局污染，所以日常起class名称时会尽量加长，这样不容易重复，但当项目由多人维护时，很容易导致命名风格不统一。
 *  样式重用困难 — 有时虽然知道项目上已有一些相似的样式，但因为怕互相影响，不敢重用。
 *  代码冗余 — 由于样式重用的困难性等问题，导致代码冗余。

**在CSS的进化历史上，各种各样的框架致力于解决以上的问题：**

*  SASS， LESS — 提供了变量、简单函数、运算、继承等，扩展性、重用性都有了很大的提升，解决了一些样式重用冗余的问题，但是对于命名混乱问题的效果不大。
 *  CSS Modules — 模块化CSS，将CSS文件以模块的形式引入到JavaScript里，基本上解决了全局污染、命名混乱、样式重用和冗余的问题，但CSS有嵌套结构的限制（只能一层），也无法方便的在CSS和JavaScript之间共享变量。

而现在随着组件化概念的流行，对从组件层面维护CSS样式的需求日益增大，`CSS-in-JS`就是在组件内部使用JavaScript对CSS进行了抽象，可以对其声明和加以维护。这样不仅降低了编写CSS样式带来的风险，也让开发变得更加轻松。它同CSS Modules的区别是不再需要CSS样式文件。

##### 3、基本使用 #####

在需要使用的组件文件夹中，创建styled文件夹，并在其中创建js文件。

注意：**组件首字母必须大写**，不然无法识别。

在该js文件里面引入style-components，然后因为我们渲染使用的是div嘛，所以尽量这边也是使用div。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]  
在组件中引用样式js文件，并使用。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]  
**几个需要注意的问题：**  
1、定义首字母 必须大写；  
2、可以采用es6 模板字符串的形式；  
3、可以通过props的形式传值 判断true 进行样式更改；  
4、内部包裹的元素 还是可以通过className的形式添加样式。

##### 5、标签属性 #####

使用style-components，如果需要使用标签属性，如input 的placeholder，a标签的href等，style-components提供了属性attrs，如下：

![在这里插入图片描述][20200819103140407.png_pic_center]  
转载于：[https://www.cnblogs.com/cui-6/p/11209023.html][https_www.cnblogs.com_cui-6_p_11209023.html]

更多用法：[https://segmentfault.com/a/1190000014682665][https_segmentfault.com_a_1190000014682665]

### （ 四）创建多行标签 ###

创建多行标签的话，需要在外层加一个父元素进行包裹。（很熟了对不对）

##### 方式1 ：传统标签（这种方式会在页面中新增DOM节点） #####

![在这里插入图片描述][2020081809305618.png_pic_center]

##### 方式2 ：Fragment（不会在DOM中增加额外节点，推荐） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]

##### 方式3 ：使用<> </>空标记（也不会在DOM中增加额外节点） #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]

### （五）使用图片 ###

方法1. 把图片放到public文件夹中，直接使用图片名。  
![在这里插入图片描述][20200819114613161.png_pic_cener]

方法2. 不在public文件夹中，通过require引用来使用图片。  
![在这里插入图片描述][20200818093121229.png_pic_ceter]  
require引用方式中，**只能使用字符串不能使用变量**。

方法3. 不在public文件夹中，通过导入图片路径，在img的src中调用路径来使用图片。  
![在这里插入图片描述][20200818093125243.png_pic_cener]  
![在这里插入图片描述][20200818093128219.png_pic_cener]

### （六）传递值 ###

在组件被使用的地方通过一个变量进行传值：  
![在这里插入图片描述][20200818093151177.png_pic_cener]  
使用**props**接收值：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_centr]

### （七）props验证 ###

这个验证，就算我们穿的值类型不对，也会显示在页面上，但是有报错提示。

import PropTypes from "prop-types"
    
    static propTypes = {
        name:PropTypes.string
    }

其实直接在创建组件的时候咱们`rccp`可以直接帮我们把`prop-types`加上。直接生成下面的代码：

import React, {  Component } from 'react'
    import PropTypes from 'prop-types'
    
    export default class home extends Component { 
        static propTypes = { 
            prop: PropTypes
        }
    
        render() { 
            return (
                <div>
                    
                </div>
            )
        }
    }

方便不，再方便，那得也把这套格式记下来。

# 总结 #

--------------------

这节其实是很基础的东西。

基础语法这块：创建组件；使用styled-components编写样式；多行标签用一个父元素包裹，不想多一个父节点，可以通过Fragment或者<></>；图片的引入；父子组件间值的传递；props验证数据类型，类型不对会报错，但会正常显示在页面。

[20200818092851889.png_pic_cener]: /images/20221124/2933240fdf6a44dfad007abae4730fd7.png
[20200818173056327.png_pic_cente]: /images/20221124/0d63f3067ea142c299f05458eaaf8d80.png
[https_blog.csdn.net_weixin_43297321_article_details_108083384]: https://blog.csdn.net/weixin_43297321/article/details/108083384
[2020081908484084.png_pic_center]: /images/20221124/ddfe589d08504f8fb62d9b90e1528f35.png
[20200819090008185.png_pic_center]: /images/20221124/29e7ac8626ed4f5897e265813577d650.png
[20200819105144966.png_pic_ceter]: https://img-blog.csdnimg.cn/20200819105144966.png#pic_ceter
[20200818092951168.png_pic_cnter]: /images/20221124/84feae2cb4534f218697f32890c24e43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_enter]: /images/20221124/17ac0ee971f84aab87eb4844142f3f49.png
[20200819094952483.png_pic_ceter]: /images/20221124/ec40c65abaea4dae9bd9cb58435f19af.png
[20200819094143698.png_pic_ceer]: /images/20221124/86a952c748f9430980b7c3f692443f13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_enter 1]: /images/20221124/49006054bbb848c4911b858017709419.png
[20200819095340225.png_pic_center]: /images/20221124/4c54ccf1c68243e4af8f1a9d3a94777f.png
[20200819110252648.png_pic_centr]: https://img-blog.csdnimg.cn/20200819110252648.png#pic_centr
[20200819110507167.png_pic_ceter]: /images/20221124/40c747d08888430bb10836935945fdfe.png
[20200819112638887.png_pic_center]: /images/20221124/dfe4314639df474e8dce18b0141a0327.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221124/8c40884d11de485a9529c9ccb7f6e2a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221124/2c70f632cf2c482bb921594869c15875.png
[20200819103140407.png_pic_center]: /images/20221124/bc2bc688b20d45a8843184230b2d71ef.png
[https_www.cnblogs.com_cui-6_p_11209023.html]: https://www.cnblogs.com/cui-6/p/11209023.html
[https_segmentfault.com_a_1190000014682665]: https://segmentfault.com/a/1190000014682665
[2020081809305618.png_pic_center]: /images/20221124/fc2eb66a596446178c1575633bebdf72.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/d73d4ae4d8be40b1881320d230a29095.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/8a72fecf3b08482a986e2314ba81a686.png
[20200819114613161.png_pic_cener]: /images/20221124/bcd33e28e9a343948a3b2071cff2fc45.png
[20200818093121229.png_pic_ceter]: /images/20221124/698109eb1acc49fca0e5fb6b3f9242a7.png
[20200818093125243.png_pic_cener]: /images/20221124/310f92c789514d23b7d3e92bb4efbbed.png
[20200818093128219.png_pic_cener]: /images/20221124/02acdc056ca24e8a8f20ccadd711bd79.png
[20200818093151177.png_pic_cener]: /images/20221124/2174991eb4f742429098f027c9b361d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_centr]: /images/20221124/4cc6a274ac4d44b6a05f4bb65c572bc3.png