React脚手架搭建项目

React提供了一个用于创建react项目的脚手架库：create-react-app

一、项目的搭建

第一步： 全局安装 npm i -g create-react-app
第二步： 切换到准备创建项目的目录，使用命令：create-react-app hello-react
第三步： 进入项目文件夹：cd hello-react
第四步： 启动项目：npm start / yarn start

二、脚手架文件的介绍

public——静态资源文件夹

• favicon.icon——网站页签图标
• index.html——主页面
• manifest.json——应用加壳的配置文件
• robots.txt——爬虫协议文件

src——源码文件夹

• App.css——App组件的样式
• App.js——App组件
• App.test.js——用于给App做测试
• index.css——样式
• index.js——入口文件

三、自己搭建项目

⚠️注意：为了区分组件还是普通的js文件：

• 将组件的首字母大写：比如Home.js
• 将组件的尾缀名写成jsx，比如：Home.jsx

在其他地方引入组件时，不需要加尾缀名js或者jsx；

刚开始改成jsx的时候，可能会报错，通过yarn start或者npm start 重启项目就可以了。

⚠️注意：

• 之前的引入：

 import Hello from './components/Hello/Hello'

为了引入组件方便，可以将组件名字改成index.jsx；

• 之后的引入：

 import Hello from './components/Hello'