React 實(shí)踐項(xiàng)目（一）

zombieda 發(fā)布于2019-08-01 17:04 / 1603人閱讀

摘要：在上已經(jīng)有接近的數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)也有一段時(shí)間了，現(xiàn)在就開始用進(jìn)行實(shí)戰(zhàn)文章地址項(xiàng)目代碼地址首先，我們開始構(gòu)建一個(gè)基礎(chǔ)項(xiàng)目。下篇教程會(huì)加入進(jìn)行登錄注冊(cè)操作項(xiàng)目代碼地址版項(xiàng)目代碼地址相應(yīng)后端項(xiàng)目代碼地址

React在Github上已經(jīng)有接近70000的 star 數(shù)了，是目前最熱門的前端框架。而我學(xué)習(xí)React也有一段時(shí)間了，現(xiàn)在就開始用 React+Redux 進(jìn)行實(shí)戰(zhàn)！

文章地址：https://github.com/DigAg/diga...
項(xiàng)目代碼地址：https://github.com/DigAg/diga...

首先，我們開始構(gòu)建一個(gè)基礎(chǔ)項(xiàng)目。

我們使用create-react-app創(chuàng)建項(xiàng)目，不需要安裝或配置W??ebpack或Babel等工具。它們被預(yù)先配置和隱藏，以便我們可以專注于代碼。

在本地全局安裝create-react-app（需要安裝Node.js且版本 >= 6，也可使用 yarn 代替 npm）

npm install -g create-react-app

創(chuàng)建項(xiàng)目

create-react-app digag 
cd digag

檢查是否成功創(chuàng)建digag文件夾與相關(guān)文件

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

在開發(fā)模式下運(yùn)行應(yīng)用程序,訪問localhost:3000在瀏覽器中查看。

npm start 
or 
yarn start

這樣我們就成功創(chuàng)建好一個(gè)可以直接運(yùn)行的React項(xiàng)目了！

接下來，開始編寫代碼了！

首先我們打開 src 目錄下的 App.js 文件，刪除掉默認(rèn)生成的代碼。輸入以下代碼：

/**
 * 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;
}

可能已經(jīng)有同學(xué)注意到了，我們?cè)?App.js 里導(dǎo)入了一個(gè)目前還不存在的組件?，F(xiàn)在，我們來創(chuàng)建它：

首先，創(chuàng)建 src/components/Index 目錄，在該目錄下創(chuàng)建 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 (
      
        
          
            
          
          
            
              首頁
              專欄
              收藏集
              發(fā)現(xiàn)
              標(biāo)簽
              
                 this.setState({searchInput: value})}
                />
              
              
                
              
              
                
                
              
            
          
        
      
    )
  }
}

我們?cè)?Header.js 文件里導(dǎo)入了 element-react UI庫的組件，所以需要在 package.json 文件里添加依賴。

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

運(yùn)行命令：

npm install 
or 
yarn install

根據(jù) element-react 文檔，在 index.js 文件中導(dǎo)入樣式

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

現(xiàn)在再重新運(yùn)行項(xiàng)目，我們可以看到這樣的頁面：

是的沒錯(cuò)，這就是編寫一個(gè)屬于自己的掘金教程。

下篇教程會(huì)加入 Redux 進(jìn)行登錄注冊(cè)操作

項(xiàng)目代碼地址：https://github.com/DigAg/diga...
vue2版項(xiàng)目代碼地址：https://github.com/DigAg/diga...
相應(yīng)后端項(xiàng)目代碼地址：https://github.com/DigAg/diga...