今天,打算写第一个页面,结果遇到了些阻力,没有想象的那么简单,有些特定的配置,还有组件的引用,还有css和js的加载模式。
按照上一篇搭建的环境,基本上是一个helloWorld了,接下来写第一个页面,首先我们将之前的入口文件删除,新建比如起名叫SearchRoom,创建入口文件index.js。
在index.js里面引入组件模块:
import SearchRoom from './app/SearchRoom/searchRoom.js';
ReactDOM.render(<SearchRoom />, document.getElementById('root'));
注意格式,index.html和之前的一样(保留的)。
组件模块代码:
class SearchRoom extends React.Component {
render() {
return (<div>hahahaha
</div>)}
}
export default SearchRoom
启动:npm start
并没有生成html文件,我们需要安装
并且在webpack.config.js里面进行配置
这样就可以在指定,目录下生成编译后的html了。
再次打包,就可以了,在组件里面编写react代码生成页面。
然后就是样式的引入,明天的主要工作,样式有公共的样式和模块的样式引入配置。
插曲:
html-webpack-plugin插件:
功能:自动帮你生成一个 html 文件,并且引用相关的 assets 文件(如 css, js)
基本用法:
filename: 生成 html 文件的文件名。默认为 index.html.
template(模板): 根据自己的指定的模板文件来生成特定的 html 文件。这里的模板类型可以是任意你喜欢的模板,可以是 html, jade, ejs, hbs, 等等,但是要注意的是,使用自定义的模板文件时,需要提前安装对应的 loader, 否则webpack不能正确解析。
clean-webpack-plugin插件:
功能: 用于在building之前删除你以前build过的文件
基本用法:newCleanWebpackPlugin(paths [, {options}])
paths: 数组,数组的每一个元素为要删除的路径。eg: ['dist/assets']
关于样式的引入:
1、公共css的引入
引入相关插件后,修改配置:
2、对于自己写的css
先声明:
创建css文件、然后写css:
在js里面添加 className =“cai”,样式生效。
下一篇将模块化,创建基本模块。
使用react-router-dom,通过路由,实现页面的变化。