Slog89_使用React框架进行前端开发1

·  阅读 127

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>
复制代码
  • 切换至当前目录下

sudo npm start

  • 浏览器会被调起并显示

  • 至此,使用React框架实现了一个简单的前端页面。


欢迎关注我的微信公众号 ArthurSlog

关注微信公众号“ArthurSlog”
微信扫描二维码,关注我的公众号

如果你喜欢我的文章 欢迎点赞 留言

谢谢

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改