今天,打算写第一个页面,结果遇到了些阻力,没有想象的那么简单,有些特定的配置,还有组件的引用,还有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文件,我们需要安装
html-webpack-plugin并且在webpack.config.js里面进行配置
const HtmlWebpackPlugin = require( 'html-webpack-plugin'); const cleanWebpackPlugin = require( 'clean-webpack-plugin'); model.. exports = { ... plugins : [ new HtmlWebpackPlugin({ filename : 'index.html', template : 'src/index.html' }), new cleanWebpackPlugin([ 'dist/assets'])], ...这样就可以在指定,目录下生成编译后的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的引入
引入相关插件后,修改配置:
{ test: / \. css $ /, use: [ 'style-loader', 'css-loader'], exclude: /node_modules/ } 在jsx里面引入 import './assets/css/iuapmobile.um.css';2、对于自己写的css
先声明:
import SearchRoomStyle from './searchRoom.css';创建css文件、然后写css:
.cai { margin-top: 60px; }在js里面添加 className =“cai”,样式生效。
下一篇将模块化,创建基本模块。
使用react-router-dom,通过路由,实现页面的变化。