从零开始搭建react项目（一）

自学react有一段时间了，官网文档基础的看了一遍，然后便把之前公司做的一个vue项目用react搭建了下，顺便整理下一些知识点。

项目大概效果：

一、利用create-react-app搭建项目

1、全局安装create-react-app，执行：npm install -g create-react-app 命令进行安装

2、进入要安装项目的文件夹，执行：npx create-react-app my-app 创建一个my-app项目

3、进入项目cd my-app，执行：npm start 编译启动项目即可

二、引入公用的css和脚本（rem.js移动端适配用）

一开始我是直接在src文件夹下新建了个assets文件夹，用来放置各种资源文件，然后直接在public文件下的index.html文件中直接用link和script引入css和脚本，但是引入脚本却报错了（Uncaught SyntaxError: Unexpected token < ）百度了下也没明白是什么原因，然后解决办法就是：把assets文件夹放到和index.html同级目录下再引入就可以了。

三、搭建页面（以首页为例）

1、在src文件夹下新建assets（放置资源文件）、component（放置公用的组件）、pages（放置页面）文件夹。

2、创建页面及对应的样式文件，并通过import '路径'，直接引入，然后ClassName=“类名”来引用。

3、创建组件：可以通过es5原生方式React.createClass定义的组件，或者 es6形式的extends React.Component定义的组件（需要手动绑定this），这边采用后者来创建

//es5
const MyComponent=React.createClass({render:function () {return <h1>mycomponent</h1>}})//es6
class MyConponent extends React.Component{constructor(props){super(props);}render() {return (<h1>mycomponent</h1>);}}

四、遇到的几个问题如下：

（1）import直接引入css样式的话，会导致css样式成为全局样式，容易产生类名冲突，样式互相覆盖。

解决方法：把css文件命名成xxx.module.css文件，然后通过import styles from ‘路径’ 引入，再通过styles.xxx来引用对应的类名，对于main-box之类的类名可通过styles['main-box']来引用，但是并不是很方便，所以可以使用驼峰法mainBox来命名类

import styles from './home.module.css'<div className={styles['user-box']+' flex-h flex-hsb'}><div className="flex-h flex-vc"><img className={styles.photo} src={require('../../assets/images/default.png')} /><span className={styles.user}>{this.state.username}</span></div><span className={styles.signin}>签到</span></div>

（2）如何使用swiper轮播

解决方法：执行：npm install swiper --save 安装依赖包；然后在要使用的页面上导入对应的css文件和js文件：

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

接下来就是和平时使用swiper是一样的了，html：

<div className="banner swiper-container"><div className="swiper-wrapper"><div className="swiper-slide"><img className="banner-img" src={require('../../assets/images/home/banner1.jpg')} /></div><div className="swiper-slide"><img className="banner-img" src={require('../../assets/images/home/banner2.jpg')} /></div><div className="swiper-slide"><img className="banner-img" src={require('../../assets/images/home/banner3.jpg')} /></div></div><div className="swiper-pagination"></div></div>

初始化（在组件生命周期componentDidMount里面调用初始化）：

initSwiper(){let banner = new Swiper ('.banner', {loop: true,  //循环slidesPerView: "auto",centeredSlides:true,autoplay: {   //滑动后继续播放（不写官方默认暂停）disableOnInteraction: false,},pagination: {  //分页器el: '.swiper-pagination'}})}

（3）图片的引入

解决方法：a、导入图片路径：

import Img from "./images/1.png"
<img src={Img} alt=""/>

b、直接获取图片路径：

<img src={require("./images/1.png")} alt=""/>

c、作为背景图片使用，可以直接写在css文件上或者如下

style={{background:`url(${require("./images/1.png")})` }}

首页具体代码如下：

/*首页*/
import React from 'react'
import Swiper from 'swiper/js/swiper.js'
import 'swiper/css/swiper.min.css'
import styles from './home.module.css'import './homeSwiper.css'import Tabbar from '../../components/tabbar/tabbar'import activity_img from '../../assets/images/home/home_activity.png'
import menu_icon1 from '../../assets/images/home/menu_icon1.png'
import menu_icon2 from '../../assets/images/home/menu_icon2.png'
import menu_icon3 from '../../assets/images/home/menu_icon3.png'
import menu_icon4 from '../../assets/images/home/menu_icon4.png'class Home extends React.Component{constructor(props){super(props)this.state = {username: 'Helen',menu: [{ id: 0,title: '资讯快递',icon: menu_icon1,descript: '了解行业动态'},{id: 1,title: '财经要闻',icon: menu_icon2,descript: '最新财经资讯'},{id: 2,title: '新手引导',icon: menu_icon3,descript: '轻松玩转币赚'},{id: 3,title: '了解区块链',icon: menu_icon4,descript: '全球数字经济'}],notice: [1,1,1,1,1,1,1,1,1],usdt: []}this.initSwiper = this.initSwiper.bind(this)}initSwiper(){let banner = new Swiper ('.banner', {loop: true,  //循环slidesPerView: "auto",centeredSlides:true,autoplay: {   //滑动后继续播放（不写官方默认暂停）disableOnInteraction: false,},pagination: {  //分页器el: '.swiper-pagination'}})}initNoticeSwiper(){let banner = new Swiper ('.notice-swiper', {loop: true,  //循环direction : 'vertical',   observer:true,//修改swiper自己或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swiperautoplay: {   //滑动后继续播放（不写官方默认暂停）disableOnInteraction: false,},})}getUsdtData(usdt){let send_data = {"event":"subscription","data":"market.price."+usdt}let that = thisthis.sendMsg(send_data,ev=>{//console.log(JSON.parse(ev.data),'订阅数字货币最新价格')let data = JSON.parse(ev.data);if(data.currency === 'BTCUSDT')that.state.usdt[0] = data.dataelse if(data.currency === 'ETHUSDT')that.state.usdt[1] = data.dataelse if(data.currency === 'LTCUSDT'){that.state.usdt[2] = data.data}if(usdt==='stop')return falsethat.setState({usdt: that.state.usdt})})}componentDidMount(){this.initSwiper()this.initNoticeSwiper()this.getUsdtData('all')}componentWillUnmount(){this.getUsdtData('stop')}render(){const up_color = styles['color-05AC8B'],down_color = styles['color-D94F65'];const is_up1 = (this.state.usdt[0]&&this.state.usdt[0].rpt.toString().indexOf('-')!=-1)?down_color:up_color;const is_up2 = (this.state.usdt[1]&&this.state.usdt[1].rpt.toString().indexOf('-')!=-1)?down_color:up_color;const is_up3 = (this.state.usdt[2]&&this.state.usdt[2].rpt.toString().indexOf('-')!=-1)?down_color:up_color;return (<div className={styles['home-wrap']}><div className={styles['user-box']+' flex-h flex-hsb'}><div className="flex-h flex-vc"><img className={styles.photo} src={require('../../assets/images/default.png')} /><span className={styles.user}>{this.state.username}</span></div><span className={styles.signin}>签到</span></div><div className="banner swiper-container"><div className="swiper-wrapper"><div className="swiper-slide"><img className="banner-img" src={require('../../assets/images/home/banner1.jpg')} /></div><div className="swiper-slide"><img className="banner-img" src={require('../../assets/images/home/banner2.jpg')} /></div><div className="swiper-slide"><img className="banner-img" src={require('../../assets/images/home/banner3.jpg')} /></div></div><div className="swiper-pagination"></div></div><div className={styles['notice-box']+' flex-h'}><i className={styles['horn-icon']}></i><div className={styles['notice-swiper']+' notice-swiper swiper-container swiper-no-swiping'}><div className="swiper-wrapper">{this.state.notice.map((item,index)=>{return <div className="swiper-slide" key={index}><p>全球币交易全新升级，等你来体验!---{index+100}</p></div>})}</div></div></div><div className={styles['usdt-box']+' flex-h'}><div className={styles['usdt-item']}><p className={styles['color-fff']}>BTC/USDT</p><p className={styles['font-32']+' '+is_up1}>{this.state.usdt[0]?this.state.usdt[0].p.toFixed(2):'1221.12'}</p><p className={is_up1}>{this.state.usdt[0]?(this.state.usdt[0].rpt*100).toFixed(2):'0.26'}%</p><p>￥{this.state.usdt[0]?this.state.usdt[0].pr.toFixed(2):'223.45'}</p></div><div className={styles['usdt-item']}><p className={styles['color-fff']}>ETH/USDT</p><p className={styles['font-32']+' '+ is_up2}>{this.state.usdt[1]?this.state.usdt[1].p.toFixed(2):'1115.22'}</p><p className={is_up2}>{this.state.usdt[1]?(this.state.usdt[1].rpt*100).toFixed(2):'-0.12'}%</p><p>￥{this.state.usdt[1]?this.state.usdt[1].pr.toFixed(2):'3212.11'}</p></div><div className={styles['usdt-item']}><p className={styles['color-fff']}>LTC/USDT</p><p className={styles['font-32']+' '+is_up3}>{this.state.usdt[2]?this.state.usdt[2].p.toFixed(2):'2201.13'}</p><p className={is_up3}>{this.state.usdt[2]?(this.state.usdt[2].rpt*100).toFixed(2):'0.12'}%</p><p>￥{this.state.usdt[2]?this.state.usdt[2].pr.toFixed(2):'323.11'}</p></div></div>           <div className={styles['activity']}><img className="wh100" src={activity_img} /></div><div className={styles['notice-box']+ ' flex-h '+styles['border-none']}><i className={styles['horn-icon']+' '+styles['recharge-text']}></i><div className={styles['notice-swiper']+' notice-swiper swiper-container swiper-no-swiping '+styles['recharge-swiper']}><div className="swiper-wrapper">{this.state.notice.map((item,index)=>{return <div className="swiper-slide" key={index}><p>相见不如怀恋 成功充值2000元---{index+10}</p></div>})}</div></div></div><div className={styles['menu-box']+' flex-h'}>{this.state.menu.map((item,index)=>{return <div className={styles['menu-item']+' flex-h flex-vc'} key={item.id}><img className={styles['menu-icon']} src={item.icon} /><div><p className={styles['menu-title']}>{item.title}</p><p>{item.descript}</p></div></div>})}</div><Tabbar /></div>)}
}export default Home

.home-wrap{color: #fff; background-color: #0C1537;}
.user-box{padding: .4rem;}
.signin{padding: 0 .36rem;height: .6rem;line-height: .6rem;background-color: #3975F9;font-size: .28rem;border-radius: 27px;
}
.user{position: relative;font-size: .32rem; margin-left: .28rem;}
.user:before{position: absolute;right: -18px;top: 8px;content: '';width: 0;height: 0;border-width: 6px;border-style: solid;border-color: #fff transparent transparent transparent;
}
.photo{width: .65rem;height: .65rem;border: 2px solid #fff;border-radius: 50%;
}.notice-box{margin: 0 .31rem;padding: .28rem 0;border-bottom: 1px solid #353F61;
}
.horn-icon{width: .34rem;height: .3rem;background-image: url(../../assets/images/home/icon_horn.png);background-repeat: no-repeat;background-size: 100%;margin-right: .28rem;
}
.notice-swiper{width: 90%;font-size: .24rem;color: #fff;height: .3rem;line-height: .3rem;
}
.usdt-box{padding-top: .5rem;padding-bottom: .5rem;font-size: .24rem;color: #69748D;
}
.usdt-item{width: 33.33%;text-align: center;
}
.activity{margin: 0 .2rem; height: 1.56rem;}
.recharge-text{width: 1.1rem;height: .27rem;background-image: url(../../assets/images/home/recharge_text.png);
}
.recharge-swiper{width: 78%;}
.border-none{border: none}
.menu-box{margin: 0 .15rem; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.menu-item{width: 3.4rem;padding: .36rem 0;background-color: #04092C;-webkit-border-radius: 8px;border-radius: 8px;font-size: .24rem;color: #737FA1;margin: 0 .1rem .2rem;
}
.menu-icon{width: .8rem; height: .8rem; margin-left: .4rem; margin-right: .3rem;}
.menu-title{font-size: .28rem; color: #fff; font-weight: bold;}.font-32{font-size: .32rem; font-weight: bold; margin-top: .12rem;}
.color-fff{color: #fff;}
.color-05AC8B{color: #05AC8B;}
.color-D94F65{color: #D94F65;}

从零开始搭建react项目（一）相关推荐

react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）
React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高.很多初学者纠结一开始是学react还是vue.个人觉得,有时间的话,最好两个都掌握一下.从学 ...
react项目_如何从零开始创建React项目（三种方式）
在开发React项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,在这里介绍三种从零开始创建React项目的方式,分别是在浏览器中直接引入.使用官方脚手架create ...
搭建react项目教程（二）
搭建react项目教程(二) 一:概述二:配置 1:配置依赖包 2:添加与后台交互的配置文件 3:封装API调用方法 4:与后台交互 5:启动项目验证接口一:概述 1:书接上文搭建react项目教 ...
搭建React项目，超简单教程
步骤前言一.安装create-react-app 二.使用步骤 1.创建项目 2.运行项目 3.文件目录总结前言最近公司闲的无聊,刚好之前学的React,至今还未搭建过一个React项目,借 ...
2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
创建react项目 Linux,idea2018 快速搭建react项目指南
react与angular和vue是截止2018年为止主流的前端框架.对于一些新手来说,想快速入门react,应该是搭建一个react最初的模板项目,然后在项目中添加一些自己喜欢的组件作为练手..今天 ...
create-react-app 搭建react项目中的小坑
刚买的电脑安装了 16.3的 node版本然后就装了一个 create-react-app 脚手架然后就出了个问题就是搭建react项目的时候一直报错一直报错就很奇怪后来我换了个 ...
spring boot：从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器
spring boot:从零开始搭建一个项目 - day 5 Mybatis plus代码自动生成器一.Mybatis plus代码自动生成器 1.引入配置 2.创建Controller 3.执行m ...
spring boot：从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2
spring boot:从零开始搭建一个项目 - day 4 控制台输出日志美化 + swagger2 一.logback.xml配置日志美化二.集成swagger2 1.引入依赖 2.编写配置文件 ...

从零开始搭建react项目（一）

从零开始搭建react项目（一）相关推荐

最新文章

热门文章