• ArthurSlog

  • SLog-89

  • 1 Year,

  • Through China,

  • October 2th 2018

Scan the QR code on wechat and follow my official account

  • ArthurSlog.com

  • MSDN: ArthurSlog

  • GitHub: BlessedChild

  • NPMJS.com: arthurslog

  • The nuggets home page

  • Jane books home page

  • segmentfault

The upper good is like water, which is good for all things without contending with the evil of others

Development Environment MacOS(Mojave 10.14 (18A391))

Required information and information sources:

  • React： https://reactjs.org/

  • REST: https://en.wikipedia.org/wiki/Representational_state_transfer

Start coding

  • Create a folder called ArthurSlogStore

cd ~/Desktop && mkdir ArthurSlogStore

cd ArthurSlogStore

  • Create a project file using NPX

npx create-react-app client

cd client

  • Delete unnecessary files. The final file directory is as follows:
 - ArthurSlogStore
   - public
     - index.html
   - src
     - App.js
     - index.css
     - index.js
     - Header.jsx
   - package.json
   - package-lock.json
Copy the code
  • The complete code is as follows:

src/Hander.jsx

import React, { Component } from 'react'

class Header extends Component {
    render() {
        return (
            <div>This is a Header</div>)}}export default Header
Copy the code

src/App.js

import React, { Component } from 'react';

import Header from './Header'

class App extends Component {
  render() {
    return (
        <Header />
    )
  }
}

export default App;
Copy the code

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
Copy the code

public/index.html


      
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>ArthurSlogStore</title>
    </head>

    <body>
        <div id="root">
            
        </div>
    </body>
</html>
Copy the code
  • Switch to the current directory

sudo npm start

  • The browser will be called up and displayed

  • At this point, a simple front end page is implemented using the React framework.

Please follow my wechat account ArthurSlog

Scan the QR code on wechat and follow my official account

If you like my article, please like it and leave a comment

thank you