目录结构:

 19_基于脚手架项目编写应用 随笔

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
import './index.css'
ReactDOM.render(<App/>, document.getElementById('root'));

 

index.css

.logo {
    width: 200px;
    height: 200px;
}

.title {
    color: red;
    font-size: 25px;
}

 

app.jsx

import React, {Component} from 'react';
import logo from '../logo.svg';

export default class App extends Component {
    render() {
        return (
            <div>
                <img className='logo' src={logo} alt="alt"/>
                <p className='title'>react app 组件</p>
            </div>
        );
    }
}

 

脚手架特点:

1.live reload 实时刷新(项目启动时,修改代码,页面自动改变)

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄