2022-01-19 学习记录--React-脚手架里的注意事项

小呀小萝卜儿

已于 2022-02-28 15:57:27 修改

阅读量777

点赞数 5

分类专栏：学习-React 文章标签： react.js javascript 前端

于 2022-01-19 17:18:05 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/122583040

版权

学习-React 专栏收录该内容

37 篇文章 6 订阅

订阅专栏

一、知识点温故 👇👇👇

【其它知识点详情可看我的另外一篇博客😊】

1、`jsx`语法规则

在这里插入图片描述

2、一定注意区分：【`js语句(代码)`】与【`js表达式`】

  1.js表达式： 一个表达式会产生一个值，可以放在任何一个需要值的地方
      
    下面这些都是表达式：
      (1). a——变量
      (2). a+b
      (3). demo(1)——调用函数
      (4). arr.map()
      (5). function test() {}——封装函数
      
  2.js语句(代码):
  
    下面这些都是语句(代码)：
      (1). if() {}
      (2). for() {}
      (3). switch() {case:×××}

二、React-脚手架里的注意事项 👇👇👇

1、`React`脚手架项目结构

在这里插入图片描述

2、`react`脚手架里面引入`CSS`样式的方法

import 'CSS样式地址'

example：
在这里插入图片描述

3、组件命名问题

首字母大写的.js，如下图：
不用.js，而命名为.jsx，首字母大写小写均可以，如下图：

4、引入文件时的省略问题

在react脚手架里面，有两个在引入时，其后缀是可以省略的：一个是.js，一个是.jsx
组件里面的.jsx取名为index时，在引入时可以直接省略，

5、样式模块化

目的：避免有共同的类名的多个组件引入后，导致样式紊乱。
方法：1)、在css的名字中间加一个.module；2)、在.jsx中引入该css时就可以自定义一个名字，比如下例中的hello；3)、在定义className(类名)时，就采用{引入css时自定义的名字.自定义类名}的样式，如下例中的{hello.title}。
example：