资讯专栏INFORMATION COLUMN

React 实践项目 (一)

zombieda / 1593人阅读

摘要:在上已经有接近的数了,是目前最热门的前端框架。而我学习也有一段时间了,现在就开始用进行实战文章地址项目代码地址首先,我们开始构建一个基础项目。下篇教程会加入进行登录注册操作项目代码地址版项目代码地址相应后端项目代码地址

React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战!

文章地址:https://github.com/DigAg/diga...
项目代码地址:https://github.com/DigAg/diga...

首先,我们开始构建一个基础项目。

我们使用create-react-app创建项目,不需要安装或配置W​​ebpack或Babel等工具。它们被预先配置和隐藏,以便我们可以专注于代码。

在本地全局安装create-react-app(需要安装Node.js且版本 >= 6,也可使用 yarn 代替 npm)

npm install -g create-react-app

创建项目

create-react-app digag 
cd digag 

检查是否成功创建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在浏览器中查看。

npm start 
or 
yarn start
这样我们就成功创建好一个可以直接运行的React项目了!

接下来,开始编写代码了!

首先我们打开 src 目录下的 App.js 文件,删除掉默认生成的代码。输入以下代码:

/**
 * Created by Yuicon on 2017/6/25.
 */
import React, { Component } from "react";
import Header from "../../components/Index/Header";
import "./App.css";

export default class App extends Component {

  componentDidMount() {
    console.log(this.props.users)
  }

  render(){
    return(
      
1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
21adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
31adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
) } }

同样,编辑 App.css 文件:

html {
  font-size: 12px;
  font-family: -apple-system,PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Helvetica Neue,sans-serif;
  text-rendering: optimizeLegibility;
  background-color: #f4f5f5;
  color: #333;
  word-break: break-all;
}

.App {
  text-align: center;
}

.App-header {
  position: relative;
  height: 5rem;
}

.main-header {
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  color: #909090;
  height: 5rem;
  z-index: 250;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all .2s;
}

.main-header .visible {
  transform: translateZ(0);
}

.container {
  display: flex;
  align-items: center;
  height: 100%;
  position: relative;
  width: 100%;
}

.main-header .container {
  max-width: 960px;
  min-width: 960px;
  margin: auto;
}

.logo {
  margin-right: 2rem;
}

.logo-img {
  border-style: none;
}

.nav-menu ul{
  background-color: white;
}

.nav-menu ul li{
  font-size: 1.33rem;
}

.nav-menu ul li:hover{
  border-bottom: 0 solid white !important;
  background-color: white !important;
}

.nav-menu button{
  margin-left: 0 !important;
  font-weight: 500;
  font-size: 1.3rem;
}

.contribute {

}

.contribute:after{
  content: "|";
  position: absolute;
  top: 24px;
  left: 100%;
  color: hsla(0,0%,59%,.4);
}

.login-btn {

}

.login-btn:after {
  content: "B7";
  margin: 0 .4rem;
}

.register-dialog {
  padding: 2rem;
  width: 26.5rem !important;
  max-width: 100%;
  font-size: 1.167rem;
  box-sizing: border-box;
}

.App-body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  height: 100vh;
}

.welcome-view {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 1.767rem;
}

.category-nav {
  background-color: #db1f00;
  width: 140px;
  position: fixed;
  top: 6.66rem;
}

.main {
  background-color: #08c6a7;
  width: 560px;
  margin-left: 13rem;
}

.sidebar {
  background-color: #e3e001;
  width: 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 文件

/**
 * Created by Yuicon on 2017/6/25.
 */
import React, {Component} from "react";
import {Button, Input, Menu} from "element-react";

export default class Header extends Component {

  constructor(props) {
    super(props);
    this.state = {
      searchInput: "",
    };
  }

  handleSelect = (index) => {
    console.log(index);
  };

  handleIconClick = () => {
    console.log("handleIconClick", this.state.searchInput);
  };

  render() {
    return (
      
首页 专栏 收藏集 发现 标签 this.setState({searchInput: value})} />
) } }

我们在 Header.js 文件里导入了 element-react UI库的组件, 所以需要在 package.json 文件里添加依赖。

//省略部分代码
"dependencies": {
     "element-react": "^1.0.11",
     "element-theme-default": "^1.3.7"
    },

运行命令:

npm install 
or 
yarn install

根据 element-react 文档,在 index.js 文件中导入样式

import "element-theme-default";
//省略部分代码

现在再重新运行项目,我们可以看到这样的页面:

是的没错,这就是编写一个属于自己的掘金教程。

下篇教程会加入 Redux 进行登录注册操作

项目代码地址:https://github.com/DigAg/diga...
vue2版项目代码地址:https://github.com/DigAg/diga...
相应后端项目代码地址:https://github.com/DigAg/diga...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50922.html

相关文章

  • React项目实践系列

    摘要:在此我们选用用友的公共静态资源库。因此打算建立远程的其实还有个关键是我使用用友配的电脑开发,在本地部署的话电脑配置。。。不过此步骤我们也可以省略了,用友的大前端技术团队提供了平台。 数据分析平台-实践系列一 项目创建于2018年1月底,到现在已经接近半年,在此写下半年来项目的实践过程以及自己对前端的学习与体悟。 技术选型 框架: React 路由: React-Router 4 状态管...

    DC_er 评论0 收藏0
  • React 实践项目 (四)

    摘要:在上已经有接近的数了,是目前最热门的前端框架。为了检验效果当然是选择部署到服务器。下篇文章将会介绍利用的镜像部署应用。完整项目代码地址 React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Redux 进行实战! 上回说到使用Redux-saga 管理 Redux 应用异步操作,应用还是只有...

    AaronYuan 评论0 收藏0
  • 前端每周清单半年盘点之 ReactReactNative 篇

    摘要:前端每周清单半年盘点之与篇前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日,宣布将的构建工具由迁移到,引发了很多开发者的讨论。 前端每周清单半年盘点之 React 与 ReactNative 篇 前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为...

    Barry_Ng 评论0 收藏0
  • 数据驱动模式借助react实践探索

    摘要:之前谈到过很多次数据驱动的理解,这次通过实际项目检验了一下自己的想法。对于数据驱动这种模式,至少从数据层,可以规避,做一层数据变化的效验这个和写服务端单侧差不多。数据驱动和有点类似,只是借用在单页面上实现了。 之前谈到过很多次数据驱动的理解,这次通过实际项目检验了一下自己的想法。 相关文件 《前端数据驱动的价值》 《前端数据驱动的陷阱》 项目详设 详设的重要性 对于复杂一点的项目,...

    jone5679 评论0 收藏0
  • 前端清单第 27 期:React Patent License 回复,Shopify WebVR 购

    摘要:新闻热点国内国外,前端最新动态就开源许可证风波进行回复数周前,基金会决定禁止旗下项目使用,因为其在标准的许可证之外添加了专利声明此举引发了社区的广泛讨论,希望能够更新其开源许可证。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清单第 27 期:React Patent License 回复,Sho...

    jeffrey_up 评论0 收藏0
  • React 实践项目 (五)Docker Nginx 部署 React

    摘要:在上已经有接近的数了,是目前最热门的前端框架。将整个应用打包发布,自动试用进行压缩与优化。毫无疑问,这些重担都将压在企业开发人员身上团队之间如何高效协调,快速交付产品,快速部署应用,以及满足企业业务需求,是开发人员亟需解决的问题。 React在Github上已经有接近70000的 star 数了,是目前最热门的前端框架。而我学习React也有一段时间了,现在就开始用 React+Red...

    EscapedDog 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<