当前位置: 首页 > Web前端 > CSS

React实践项目(一)

时间:2023-03-31 12:25:37 CSS

React在Github上拥有近7万星数,是目前最流行的前端框架。而我学习React也有一段时间了,现在开始使用React+Redux进行实战!文章地址:https://github.com/DigAg/diga...项目代码地址:https://github.com/DigAg/diga...首先我们开始搭建一个基础项目。我们使用create-react-app创建项目,无需安装或配置Webpack或Babel等工具。它们是预先配置和隐藏的,因此我们可以专注于代码。本地全局安装create-react-app(需安装Node.js且版本>=6,或使用yarn代替npm)npminstall-gcreate-react-appcreateprojectcreate-react-appdigagcddigag检查是否成功创建digag文件夹和相关文件digag├──README.md├──node_modules├──package.json├──.gitignore├──public│└──favicon.ico│└──index.html│└──manifest.json└──src└──App.css└──App.js└──App.test.js└──index.css└──index.js└──logo.svg└──registerServiceWorker.js以在开发模式下运行应用程序,访问localhost:3000以在浏览器中查看它。npmstart或者yarnstart这样我们就成功创建了一个可以直接运行的React项目!接下来开始写代码!首先,我们打开src目录下的App.js文件,删除默认生成的代码。输入以下代码:/***由Yuicon创建于2017/6/25。*/importReact,{Component}from'react';importHeaderfrom"../../components/Index/Header";import'./App.css';exportdefaultclassAppextendsComponent{componentDidMount(){console.log(this.props.users)}render(){return(

1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
21adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
31adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
)}}相同,编辑App.css文件:html{font-size:12px;font-family:-apple-system,PingFangSC,HiraginoSansGB,Arial,MicrosoftYaHei,HelveticaNeue,sans-serif;文本渲染:优化易读性;背景色:#f4f5f5;颜色:#333;word-break:break-all;}.App{text-align:center;}.App-header{position:relative;高度:5rem;}.main-header{背景:#fff;border-bottom:1pxsolid#f1f1f1;颜色:#909090;高度:5rem;z-指数:250;位置:固定;顶部:0;左:0;右:0;transition:all.2s;}.main-header.visible{transform:translateZ(0);}.container{display:flex;对齐项目:居中;高度:100%;位置:相对;宽度:100%;}.main-header.container{最大宽度:960px;最小宽度:960px;margin:auto;}.logo{margin-right:2rem;}.logo-img{border-style:none;}.nav-menuul{background-color:white;}.nav-menuulli{font-size:1.33rem;}.nav-menuulli:hover{border-bottom:0solidwhite!important;background-color:white!important;}.nav-menubutton{margin-left:0!important;字体粗细:500;字体大小:1.3rem;}.contribute{}.contribute:after{content:"|";位置:绝对;顶部:24px;左:100%;颜色:hsla(0,0%,59%,.4);}.login-btn{}.login-btn:after{content:"\B7";边距:0.4rem;}.register-dialog{填充:2rem;宽度:26.5rem!重要;最大宽度:100%;字体大小:1.167rem;box-sizing:border-box;}.??App-body{position:relative;保证金:0自动;宽度:100%;最大宽度:960px;高度:100vh;}.welcome-view{位置:相对;显示:弹性;证明内容:空格之间;margin-top:1.767rem;}.category-nav{background-color:#db1f00;宽度:140px;位置:固定;顶部:6.66rem;}.main{背景色:#08c6a7;宽度:560px;margin-left:13rem;}.sidebar{背景色:#e3e001;宽度:19.2rem;box-sizing:border-box;}可能有同学注意到我们导入了一个App.js中不存在的组件现在我们来创建它:首先创建src/components/Index目录,在该目录下创建Header.js.digag├──README.md├──node_modules├──package.json├──.gitignore├──public│└──favicon.ico│└──index.html│└──manifest.json└──src└──components└──Index└──Header.js└──App.css└──App.js└──App.test.js└──index.css└──index.js└──logo.svg└──registerServiceWorker.js编辑Header.js文件/***Yuicon于2017/6/25创建。*/importReact,{Component}from'react';import{Button,Input,Menu}from"element-react";exportdefaultclassHeaderextendsComponent{constructor(props){super(props);this.state={searchInput:'',};}handleSelect=(index)=>{console.log(index);};handleIconClick=()=>{console.log('handleIconClick',this.state.searchInput);};render(){return(主页列<菜单.Itemindex="3">收藏发现标签this.setState({searchInput:value})}/>贡献console.log('login')}>loginconsole.log('register')}>register)}}我们在Header.js文件中引入了element-reactUI库组件,所以需要在package.json文件中添加依赖//省略部分代码"dependencies":{"element-react":"^1.0.11","element-theme-default":"^1.3.7"},运行命令:npminstall或yarninstall根据元素-react文档,在index.js文件中导入样式import'element-theme-default';//省略部分代码现在再次运行项目,我们可以看到这样一个页面:对,没错,这个正在编写您自己的金块教程。下一篇教程会添加Redux登录注册。项目代码地址:https://github.com/DigAg/diga...Vue2版本项目代码地址:https://github.com/DigAg/diga...对应完后项目代码地址:https://github.com/DigAg/diga...

猜你喜欢