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'