weixin_39562752
2020-12-02 23:39 阅读 11

React 实践项目 (一)

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

做了一个看好康小姐姐的app,有兴趣的可以下载 1528377066

项目代码地址:https://github.com/DigAg/digag-pc-react React 实践项目 (一) React 实践项目 (二) React 实践项目 (三) React 实践项目 (四) 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 {

  render(){
    return(
      <div classname="App">
        <div classname="App-header">
          <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.3.1",
     "element-theme-default": "^1.4.8"
    },

运行命令:


npm install 
or 
yarn install

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


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

index

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

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

该提问来源于开源项目:DigAg/digag-pc-react

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

28条回答 默认 最新

  • weixin_39927861 weixin_39927861 2020-12-02 23:39

    好像并没有用到redux吧

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    下一篇会讲Redux 项目代码里已经有了 可以去看看 欢迎多提建议

    点赞 评论 复制链接分享
  • weixin_39883194 weixin_39883194 2020-12-02 23:39

    Module not found: Can't resolve 'element-theme-default' in 'D:\workspaceForNode\digag\src' 这个是什么问题啊

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    我猜是依赖的问题 这是 element-react 文档 你对比下 你和我的 package.json

    点赞 评论 复制链接分享
  • weixin_39701288 weixin_39701288 2020-12-02 23:39

    我也遇到同样的问题,你的问题解决了吗?怎么解决的

    点赞 评论 复制链接分享
  • weixin_39701288 weixin_39701288 2020-12-02 23:39

    对比了package.json,我的少了很多东西,然后我把你的直接复制下来又一堆报错

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    是这样的 代码是一直在更新的 现在项目里的是最新的 你可以在commit里找到之前的代码

    点赞 评论 复制链接分享
  • weixin_39827728 weixin_39827728 2020-12-02 23:39

    App.js中,相对地址好像错了 import Header from "../../components/Index/Header"; 应该是./components/Index/Header

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    是的 后面目录结构有改过 这里没有改过来

    点赞 评论 复制链接分享
  • weixin_39882589 weixin_39882589 2020-12-02 23:39

    × addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). 这个是什么问题?在使用element-react的Input时产生的?

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    可能是你的依赖里写了两个 react 没有具体代码 我也只能猜测

    点赞 评论 复制链接分享
  • weixin_39843215 weixin_39843215 2020-12-02 23:39

    需要安装以下两个组件

    
    npm install element-react
    npm install element-theme-default
    
    点赞 评论 复制链接分享
  • weixin_39631007 weixin_39631007 2020-12-02 23:39

    页面可以跳出来一下 就不见了 之后报了这样一个错误 addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    -dance 你可以参考代码commit 看下是哪里有错误

    点赞 评论 复制链接分享
  • weixin_39650091 weixin_39650091 2020-12-02 23:39

    111111111111

    样式错乱了

    点赞 评论 复制链接分享
  • weixin_39519769 weixin_39519769 2020-12-02 23:39

    image请问这是什么问题

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    你把出问题的项目打包给我看看 不然我也不清楚是什么问题

    点赞 评论 复制链接分享
  • weixin_39519769 weixin_39519769 2020-12-02 23:39

    src.zip 这是第一个实践项目的src的文件夹,按步骤来的,依赖是对的,运行就是上面那个问题,帮我看看谢谢0.0

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    package.json 都没有... 把完整的给我看看

    点赞 评论 复制链接分享
  • weixin_39519769 weixin_39519769 2020-12-02 23:39

    demon.zip node_module没有传,加起来太大啦0.0

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    问题应该是 create-react-app 的版本问题 我当时写的时候 create-react-app 的 react 版本是 15.6.1 现在已经到 16 了 。 element-react 里的react版本也是15.6.1的 冲突了

    点赞 评论 复制链接分享
  • weixin_39519769 weixin_39519769 2020-12-02 23:39

    好吧,谢谢啦

    点赞 评论 复制链接分享
  • weixin_39631467 weixin_39631467 2020-12-02 23:39

    同样遇到楼上的那个版本问题 react 16应该安装哪个版本的element-react

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    可以改用低版本的create-react-app 或者升级element-react版本 去仓库看了下 element-react 1.3.1 版本是用的react 16

    点赞 评论 复制链接分享
  • weixin_39588209 weixin_39588209 2020-12-02 23:39

    npm i element-react --save npm install element-theme-default --save

    2个命令就好了

    点赞 评论 复制链接分享
  • weixin_39999532 weixin_39999532 2020-12-02 23:39

    样式有问题

    点赞 评论 复制链接分享
  • weixin_39928102 weixin_39928102 2020-12-02 23:39

    Menu组件呢

    点赞 评论 复制链接分享
  • weixin_39562752 weixin_39562752 2020-12-02 23:39

    这个组件是引用的UI框架的 不是自己写的

    点赞 评论 复制链接分享

相关推荐