标签：index 笔记 hello react 组件 脚手架 Hello css
https://www.bilibili.com/video/BV1wy4y1D7JT?p=49&spm_id_from=pageDriver
使用create-react-app创建react应用
- 全局安装：npm install -g create-react-app
- 切换到想创项目的目录，使用命令：create-react-app hello-react
- 进入项目文件夹：cd hello-react
- 启动项目：npm start 或者 yarn start
启动项目有可能遇到下面的报错：
解决：移除浏览器中关于react的扩展程序，重新下载安装新的版本
下载地址： https://www.crx4chrome.com/crx/3068/
下载完之后直接将crx文件拖到扩展程序中就安装好了
项目目录解析
组件编写：
命名规范：一般在src文件夹目录下新建一个components文件夹用于存放组件
引入组件时，.js/.jsx结尾的文件后缀可省略不写，若组件文件夹内使用index命名文件，index亦可省略不写。例如：import Hello from './components/Hello’默认引入的就是Hello文件夹下的index.jsx文件
vscode插件：
安装上面得插件后敲入rcc就会自动补全组件格式：
类名是根据文件名称填充的，更多的简写方式可以查看插件的详细介绍
组件样式重名冲突：
每个组件内都有对应的css样式文件，如果样式重名，例如多个组件中的css均有.title样式，最后都是集中引入到app.js文件中进行渲染，最后引入的会覆盖之前的样式，为解决这一问题，可以利用样式模块化的形式，将index.css文件更名为index.module.css，更名后的引入方式如下：
// 引入index.css
import './index.css'
// 引入index.module.css
// 可以用一个变量接收css文件
import hello from './index.module.css'
// 使用方法 hello.[类名]
export default class Hello extends Component {
render() {
return (
<div className={hello.title}>Hello Kamen</div>
)
}
}
不使用上面的方式也可以在每一个组件的css文件外再包一层（less的写法），例如：
.Hello {
.title {
color: pink;
}
}
标签：index,笔记,hello,react,组件,脚手架,Hello,css 来源： https://blog.csdn.net/weixin_43387238/article/details/121396470
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。