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

项目代码地址:https://github.com/DigAg/digag-pc-react

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

我们使用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(
<div className="App">
<div className="App-header">
<Header/>
</div>
<div className="App-body">
<div className="welcome-view">
<div className="category-nav">
<div>1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd</div>
</div>
<div className="main">
21adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
</div>
<div className="sidebar">
31adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd1adasdasdasdasdasd
</div>
</div>
</div>
</div>
)
}
}

同样,编辑 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 (
<header className="main-header visible">
<div className="container">
<a href="/" className="logo">
<img src="//gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" alt="掘金" className="logo-img"/>
</a>
<div className="nav-menu">
<Menu defaultActive="1" mode="horizontal" onSelect={this.handleSelect}>
<Menu.Item index="1">首页</Menu.Item>
<Menu.Item index="2">专栏</Menu.Item>
<Menu.Item index="3">收藏集</Menu.Item>
<Menu.Item index="4">发现</Menu.Item>
<Menu.Item index="5">标签</Menu.Item>
<Menu.Item index="6">
<Input
size="small"
icon="search"
placeholder="搜索掘金"
onIconClick={this.handleIconClick}
onChange={(value) => this.setState({searchInput: value})}
/>
</Menu.Item>
<Menu.Item index="7">
<Button type="text" icon="edit" className="contribute">投稿</Button>
</Menu.Item>
<Menu.Item index="8">
<Button type="text" className="login-btn"
onClick={ () => console.log('登录') }>登录</Button>
<Button type="text" onClick={ () => console.log('注册') }>注册</Button>
</Menu.Item>
</Menu>
</div>
</div>
</header>
)
}
}
  • 我们在 Header.js 文件里导入了 element-react UI库的组件, 所以需要在 package.json 文件里添加依赖。
//省略部分代码
"dependencies": {
"element-react": "^1.0.11",
"element-theme-default": "^1.3.7",
"react": "^15.6.1",
"react-dom": "^15.6.1"
},

运行命令:

npm install
or
yarn install

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

import 'element-theme-default';
//省略部分代码
  • 现在再重新运行项目,我们可以看到这样的页面:

是的没错,这就是编写一个属于自己的掘金教程。
下篇教程会加入 Redux 进行登录注册操作

项目代码地址:https://github.com/DigAg/digag-pc-react
vue2版项目代码地址:https://github.com/DigAg/digag-pc-vue2
相应后端项目代码地址:https://github.com/DigAg/digag-server

React 实践项目 (一)的更多相关文章

  1. React 实践项目 (二)

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

  2. React 实践项目 (三)

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

  3. React 实践项目 (五)

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

  4. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  5. 在React旧项目中安装并使用TypeScript的实践

    前言 本篇文章默认您大概了解什么是TypeScript,主要讲解如何在React旧项目中安装并使用TypeScript. 写这个的目的主要是网上关于TypeScript这块的讲解虽然很多,但都是一些语 ...

  6. 技术实践丨React Native 项目 Web 端同构

    摘要:尽管 React Native 已经进入开源的第 6 个年头,距离发布 1.0 版本依旧是遥遥无期."Learn once, write anywhere",完全不影响 Re ...

  7. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  8. React Native 项目实战-Tamic

    layout: post title: React Native 项目实战 date: 2016-10-18 15:02:29 +0800 comments: true categories: Rea ...

  9. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

随机推荐

  1. web 直播&即时聊天------阿里云、融云(二)

    上一篇简要主要介绍了融云制作聊天室的基本方法,这次基本属于对上一篇的补充以及进阶...^_^... (ps:吐槽一下,加了三个融云的线下qq群,全部没人解决问题,也不知道建此群的意义,若是民间的话就当 ...

  2. oracle数据库常用的99条查询语句(转载)

    1. select * from emp; 2. select empno, ename, job from emp; 3. select empno 编号, ename 姓名, job 工作 fro ...

  3. C# 字典 Dictionary

    原文地址http://www.cnblogs.com/txw1958/archive/2012/11/07/csharp-dictionary.html  侵删

  4. Include promo/activity effect into the prediction (extended ARIMA model with R)

    I want to consider an approach of forecasting I really like and frequently use. It allows to include ...

  5. 使用VideoView开发视频总结

    一.VideoView及其相关组件总结 在Android中,播放视频有2种方式,第一种方式是使用MediaPlayer结合SurfaceView来播放,通过MediaPlayer来控制视频的播放.暂停 ...

  6. 拥抱Node.js 8.0,N-API入门极简例子

    本文摘录自<Nodejs学习笔记>,更多章节及更新,请访问 github主页地址.欢迎加群交流,群号 197339705. N-API简介 Node.js 8.0 在2017年6月份发布, ...

  7. 导入java项目时出现红色叹号问题的解决

    问题:导入java项目时出现红色叹号(如下图所示) 原因:引入项目的某些jar包跟自己电脑上的位置不一样: 解决方案:步骤如下 (1)右键红色叹号所在项目————>build path————& ...

  8. 深入理解循环队列----循环数组实现ArrayDeque

    我们知道队列这种数据结构的物理实现方式主要还是两种,一种是链队列(自定义节点类),另一种则是使用数组实现,两者各有优势.此处我们将要介绍的循环队列其实是队列的一种具体实现,由于一般的数组实现的队列结构 ...

  9. 50几个photoshop快捷键

    一.常用的热键组合 1.图层混合模式快捷键:正常(Shift + Option + N),正片叠底(Shift + Option + M),滤色(Shift + Option + S),叠加(Shif ...

  10. spring-boot+mybatis开发实战:如何在spring-boot中使用myabtis持久层框架

    前言: 本项目基于maven构建,使用mybatis-spring-boot作为spring-boot项目的持久层框架 spring-boot中使用mybatis持久层框架与原spring项目使用方式 ...