Slog89_使用React框架进行前端开发1_react框架中标麒麟-CSDN博客

本文链接：https://blog.csdn.net/u010997452/article/details/82929456

ArthurSlog

ArthurSlog
SLog-89
Year·1
Guangzhou·China
October 2th 2018

关注微信公众号“ArthurSlog”

上善若水水善利万物而不争处众人之所恶故几于道

开发环境MacOS(Mojave 10.14 (18A391))

需要的信息和信息源：

开始编码

新建一个文件夹ArthurSlogStore

cd ~/Desktop && mkdir ArthurSlogStore

cd ArthurSlogStore

使用npx创建一个工程文件

npx create-react-app client

cd client

 - ArthurSlogStore
   - public
     - index.html
   - src
     - App.js
     - index.css
     - index.js
     - Header.jsx
   - package.json
   - package-lock.json

完整代码如下：

src/Hander.jsx

import React, { Component } from 'react'

class Header extends Component {
    render() {
        return (
            <div>This is a Header</div>
        )
    }
}

export default Header

src/App.js

import React, { Component } from 'react';

import Header from './Header'

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

export default App;

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'));

public/index.html

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

    <body>
        <div id="root">
            
        </div>
    </body>
</html>