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

最新推荐文章于 2021-12-15 14:07:51 发布

weixin_43297321

最新推荐文章于 2021-12-15 14:07:51 发布

阅读量163

点赞数

分类专栏： React 笔记非原创文章标签： react

本文链接：https://blog.csdn.net/weixin_43297321/article/details/108069825

版权

React 笔记非原创专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

（四）创建多行标签

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

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

weixin_43297321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 项
复制链接

扫一扫