创建一个简易的官网

我们在写我们自己的组件的时候，如果我们想直接在当前项目页面里看到和使用我们自己的组件的话，我们需要新建一个用来专门测试的页面，因为我们的index.tsx是专门用来导出我们的组件的，所以我们不能直接在index.tsx里写

1. 新建一个example.tsx文件，在webpack.config.dev.js里添加一个入口为我们的这个测试文件

• webpack.config.dev.js

module.exports = Object.assign({}, base, {
    mode: 'development',
    entry: {
      example: './example.tsx'
    }
})

2. 将webpack.config.dev.js里展示的html改为example.html，然后新建一个example.html页面

plugins: [
        new HtmlWebpackPlugin({
            template: 'example.html'
        })
    ]

现在我们运行yarn start就会自动将我们example.tsx里的代码编译到我们的example.html页面

尝试在example.tsx里使用我们的icon

import React from 'react'
import ReactDOM from 'react-dom'
import Icon from './lib/icon/icon'

ReactDOM.render(
    <div>
        <Icon name="alipay"/>
    </div>,
    document.querySelector('#root')
)

使用React router创建简易的官网

• example.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import { HashRouter as Router, Route, Link } from 'react-router-dom'
import IconExample from './lib/icon/icon.example';

ReactDOM.render(
    <Router>
        <div>
            <header>
                <div className="logo">
                    IReact-UI
                </div>
            </header>
            <div>
                <aside>
                    <h2>组件</h2>
                    <ul>
                        <li>
                            <Link to="/icon">Icon</Link>
                        </li>
                    </ul>
                </aside>
                <main>
                    <Route path="/icon" component={IconExample}></Route>
                </main>
            </div>
        </div>
    </Router>,
    document.querySelector('#root')
)

• Icon.example.tsx

import React from 'react'
import Icon from './icon'
const IconExample: React.FunctionComponent = () => {
    return (
        <div>
            <Icon name="alipay"></Icon>
        </div>
    )
}
export default IconExample