React has close to 70,000 stars on Github and is currently the most popular front-end framework. React+Redux React+Redux

Project code address: github.com/DigAg/digag…

  • First, we started building a foundation project.

We used create-React-app to create projects without having to install or configure tools like Webpack or Babel. They are pre-configured and hidden so that we can focus on the code.

  • Install create-react-app globally on the local PC (node. js must be installed with version >= 6, or yarn can be used instead of NPM).
npm install -g create-react-app
Copy the code
  • Create a project
create-react-app digag 
cd digag 
Copy the code
  • Check that the Digag folder and related files were created successfully
Digag ├ ─ ─ the README. Md ├ ─ ─ node_modules ├ ─ ─ package. The json ├ ─ ─ the gitignore ├ ─ ─ public │ └ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML │ └ ─ ─ Manifest. Json └ ─ ─ the SRC └ ─ ─ App. CSS └ ─ ─ App. Js └ ─ ─ App. Test, js └ ─ ─ index. The CSS └ ─ ─ index. The js └ ─ ─ logo. The SVG └ ─ ─ registerServiceWorker.jsCopy the code
  • Run the application in development mode, visit localhost:3000 and view it in your browser.
npm start 
or 
yarn start
Copy the code
Now we have created a React project that runs directly!Copy the code

  • 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> ) } }Copy the code

Also, 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; The font - size: 1.3 rem; } .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.5 rem! important; max-width: 100%; The font - size: 1.167 rem; 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.767 rem; } .category-nav { background-color: #db1f00; width: 140px; position: fixed; Top: 6.66 rem; } .main { background-color: #08c6a7; width: 560px; margin-left: 13rem; } .sidebar { background-color: #e3e001; Width: 19.2 rem; box-sizing: border-box; }Copy the code

As some of you may have noticed, we imported a component in app.js that does not currently exist. Now, let’s create it:

  • First, create the SRC /components/Index directory, and create header.js in that directory.
Digag ├ ─ ─ the README. Md ├ ─ ─ node_modules ├ ─ ─ package. The json ├ ─ ─ the gitignore ├ ─ ─ public │ └ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML │ └ ─ ─ Manifest. Json └ ─ ─ the SRC └ ─ ─ components └ ─ ─ Index └ ─ ─ the Header. The js └ ─ ─ App. CSS └ ─ ─ App. Js └ ─ ─ App. Test, js └ ─ ─ Index. The CSS └ ─ ─ Index.js ├ ─ ├ ─ registerServiceworker.jsCopy the code

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 = "nuggets" className = "logo - img" / > < / a > < div className="nav-menu"> <Menu defaultActive="1" mode="horizontal" onSelect={this.handleSelect}> <Menu.Item Index ="1"> Home </ menu. Item> < menu. Item index="2"> Column </ menu. Item> < menu. Item index="3"> Collection </ menu. Item> < menu. Item Index ="4"> Found </ menu. Item> < menu. Item index="5"> Tag </ menu. Item> < menu. Item index="6"> <Input size="small" icon="search" Placeholder =" search "onIconClick={this.handleiconclick} onChange={(value) => this.setState({searchInput: < < 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(' login ') } > login < / Button > < Button type = "text" onClick = {() = > console. The log (' registered ')} > register < / Button > < / Menu. The Item > < Menu > < / div > < / div > </header> ) } }Copy the code
  • We imported the element-React UI library components in the header. js file, so we need to add dependencies to the package.json file.
/ / omit part of the code "dependencies" : {" element - the react ":" ^ 1.0.11 ", "element - the theme - the default" : "^ 1.3.7", "react" : "^ 15.6.1", "the react - dom" : "^ 15.6.1"},Copy the code

Run the command:

npm install 
or 
yarn install
Copy the code

Import styles in the index.js file according to the element-react document

import 'element-theme-default'; // Omit some codeCopy the code
  • Now re-run the project and we should see a page like this:

That’s right, writing your own nuggets tutorial. The next tutorial will include Redux for login and registration

Project code address: github.com/DigAg/digag… Vue2 version project code address: github.com/DigAg/digag… Corresponding back-end project code address: github.com/DigAg/digag…