一、安装脚手架
1.全局安装:npm i -g create-react-app
2.创建项目:create-react-app hello-react
3.进入项目文件夹:cd 文件夹名称
4.启动项目:npm start / yarn start
二、脚手架结构(标红的为常用组件)
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标
index.html -------- 主页面
logo192.png ------- logo图
logo512.png ------- logo图
manifest.json ----- 应用加壳的配置文件
robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式
App.js --------- App组件
App.test.js ---- 用于给App做测试
index.css ------ 样式
index.js - ------ 入口文件
logo.svg ------- logo图
reportWebVitals.js --- 页面性能分析文件(需要web-vitals库的支持)
setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)
三、编码流程
-
拆分组件: 拆分界面,抽取组件
-
实现静态组件: 使用组件实现静态页面效果
-
实现动态组件
3.1 动态显示初始化数据
3.1.1 数据类型
3.1.2 数据名称
3.1.2 保存在哪个组件?
3.2 交互(从绑定事件监听开始)
四、vscode使用的插件
五、第一个react项目---Hello React
1.首先将项目中用不找的文件删除,如果不想删留着也没事。
2.index 页面:这个页面是固定版式,创建实际DOM原生,将来写的组件都会渲染到root里。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="第一个react项目"
/>
<title>Hello world</title>
</head>
<body>
<!-- 如果页面不支持javaScript语言就会显示这句话 -->
<noscript>页面不支持javaScript语言</noscript>
<div id="root"></div>
</body>
</html>
3.创建component组件文件夹,这个是保存项目中使用的组件的。然后创建index.jsx和index.css文件。文件结构如下图所示:
4.在 Hello 的 index.jsx 中写编写hello React类式组件。在index.css文件中给hello类选择器加样式。如下代码所示。(快捷键:rcc是创建类式组件,rfc是创建函数式组件)
javascript
//js部分
import React from 'react';
import'./index.css'
export default class Hello extends React.Component{
render(){
return <h2 className='hello'>Hello React!</h2>
}
}
//css部分
.title{
background-color: yellow;
}
5.如果写法跟我一样,Hello文件夹下都是index命名的文件,那么会出现属性覆盖的问题。解决方法有两种,1.不要用index命名。2.将css文件模块化;将css文件名改为index.module.css,在index.js文件中引入 import hello from './index.module.css' ,在渲染时 <h2 className={hello.title}>Hello React!</h2>。具体实现如下图所示 :
6.效果实现截图(文字居中的样式是在app.css文件中设置的)