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

React 脚手架

---

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

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

（二）React脚手架分类

常用的脚手架工具有如下几个：

推荐使用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）第二次，在项目即将创建成功时，来了下面的错误提示：

原因：node版本不兼容问题
解决：切换node版本或者使用npm安装

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

如果你的node版本切换无法成功，请看下文：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脚本里面，应该能看到先关的执行命令：

其实这个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项目启动成功。

（四）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   样式文件夹

这是原始的：       整理以后的：
  
注意：在react中，没有固定创建文件夹的方式，所以，可以自定义文件夹，存放我们的代码。

React 脚手架中写代码

---

（一）创建组件

先在src下创建一个文件夹components用来存放我们自己写的组件。然后在该文件夹下创建一个home.jsx，注意是.jsx文件，当然你非要用.js也行。然后在该home.jsx中创建类组件，简单的方法是rcc。然后写入点东西，我写的是一个h1标签。

其实在react脚手架中，除了src下的index.css和app.css，不会再使用到.css结尾的文件了。因为都用.js来写了。不过为了方便观察，第一次使用脚手架，我们还是看下什么情况吧。

在与home.jsx同级创建一个home.css，然后随便加点样式。

在home.jsx中引入home.css：

在App.js中引入home.jsx；第一步引入，第二步使用（比vue少了一步调用）：

保存后，在页面中查看：

在创建组件时，我们用到了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里创建一个存放组件和样式的文件；第二种是将样式文件与组件文件分离开，单独存放。

个人比较喜欢第二种，感觉文件分类更清晰。

接下来使用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>
        )
    }
}

（三）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。

在组件中引用样式js文件，并使用。

几个需要注意的问题：
1、定义首字母 必须大写；
2、可以采用es6 模板字符串的形式；
3、可以通过props的形式传值 判断true 进行样式更改；
4、内部包裹的元素 还是可以通过className的形式添加样式。

5、标签属性

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

转载于：https://www.cnblogs.com/cui-6/p/11209023.html

更多用法：https://segmentfault.com/a/1190000014682665

（ 四）创建多行标签

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

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

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

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

（五）使用图片

方法1. 把图片放到public文件夹中，直接使用图片名。

方法2. 不在public文件夹中，通过require引用来使用图片。

require引用方式中，只能使用字符串不能使用变量。

方法3. 不在public文件夹中，通过导入图片路径，在img的src中调用路径来使用图片。

（六）传递值

在组件被使用的地方通过一个变量进行传值：

使用props接收值：

（七）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验证数据类型，类型不对会报错，但会正常显示在页面。