React already has nearly 70,000 star ts on Github, and is the most popular front-end framework at present. And I've been learning React for a while. Now I'm going to fight with React+Redux!

Article Address: https://github.com/DigAg/diga...
Project code address: https://github.com/DigAg/diga...

• First, we started building a basic project.

We use create-react-app To create a project, you do not need to install or configure tools such as W ebpack or Babel. They are pre-configured and hidden so that we can focus on code.

• Install create-react-app locally and globally (you need to install it) Node.js And version >= 6 can also be used yarn Instead of npm)

npm install -g create-react-app

• Create a project

create-react-app digag 
cd digag 

• Check whether the digag folder and related files were successfully created

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

• Running the application in development mode, accessing localhost:3000 View in the browser.

npm start 
or 
yarn start

So we have successfully created a real project that can run directly!

• Next, start coding!

• First, we open the App.js file in the src directory and delete the code generated by default. Enter the following code:

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

Similarly, edit the App.css file:

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

Maybe some of you have noticed that we have imported a component in App.js that does not yet exist. Now let's create it:

• First, create the src/components/Index directory under which you create 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

Edit the Header.js file

/**
 * 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=" digging "className=" logo-img "/>
          </a>
          <div className="nav-menu">
            <Menu defaultActive="1" mode="horizontal" onSelect={this.handleSelect}>
              <Menu.Item index="1">home page</Menu.Item>
              <Menu.Item index="2">Special column</Menu.Item>
              <Menu.Item index="3">Collection</Menu.Item>
              <Menu.Item index="4">find</Menu.Item>
              <Menu.Item index="5">Label</Menu.Item>
              <Menu.Item index="6">
                <Input
                  size="small"
                  icon="search"
                  placeholder="Search for Nuggets"
                  onIconClick={this.handleIconClick}
                  onChange={(value) => this.setState({searchInput: value})}
                />
              </Menu.Item>
              <Menu.Item index="7">
                <Button type="text" icon="edit" className="contribute">Contribute</Button>
              </Menu.Item>
              <Menu.Item index="8">
                <Button type="text" className="login-btn"
                        onClick={ () => console.log('Sign in') }>Sign in</Button>
                <Button type="text" onClick={ () => console.log('register') }>register</Button>
              </Menu.Item>
            </Menu>
          </div>
        </div>
      </header>
    )
  }
}

• We imported the component of the element-react UI Library in the Header.js file, so we need to add dependencies in the package.json file.

//Omit part of the code
"dependencies": {
     "element-react": "^1.0.11",
     "element-theme-default": "^1.3.7",
      "react": "^15.6.1",
      "react-dom": "^15.6.1"
    },

Run the command:

npm install 
or 
yarn install

according to element-react Document, import style in index.js file

import 'element-theme-default';
//Omit part of the code

• Now we can run the project again, and we can see the following pages:

Yes, that's right. It's about writing your own Nuggets tutorial.

The next tutorial will add Redux for login registration

Project code address: https://github.com/DigAg/diga...
vue2 version project code address: https://github.com/DigAg/diga...
The corresponding back-end project code address: https://github.com/DigAg/diga...