react安装
1.安装react环境
npm install create-react-app
2.创建名称
create-react-app apps(项目名称)
3.进入项目
cd apps
4.运行react
npm start
出现react页面即成功
文件夹apps
项目中包含文件!
其中,node_modules是包管理文件;
public是web容器,如果用json或者axios访问的文件都要在public文件夹中,json或者axios文件中包含图片的连接,图片也要在public中;
src是要建立组件文件夹的地方,在组件页面引入的图片或者文件的连接,在src文件夹中创建static文件即可
App.js是最大的组件文件,里面用于放置组件
App.css是全部组件的样式
项目步骤
(一) .在src中创建components文件夹用于存放组件,创建static文件夹用于存放要连接的图片或者文件;
(二).components文件夹中创建组件文件
1)home文件夹:其中包括Home.js(是集合各部分的总组件),Heads.js(头部组件),Slide.js(轮播图组件),Mains.js(内容组件)
2)list文件夹:其中包含List.js(是List文件夹所有组件的集合)以及各个部分的组件文件
3)show文件夹,其中有Show.js文件
(三).配置路由(在App.js中)
1)安装react路由
npmt install react-router-dom,重新运行npm start
2)在App.js文件中引入路由,以及要配置的各部分组件
如果配置路由时传参
接收路由传递的参数用this.params.match.id
可以通过Number(this.props.match.id)判断要用哪一个组件
3)如果使用同一个组件Slide,在Head和List呈现不同的状态,要使用动态改变url属性
在Slide.js文件中用ajax或者axios请求路径
1)用构造函数初始化state
2)ajax请求文件或者用axios(要安装 npm install axios ,在文件中引入)
3)render,渲染页面