React
程序员文章站
2024-03-25 14:43:52
...
1. webpack，React
是打包所有的资源。模块打包机
-
安装webpack
cnpm install webpack webpack-cli -S
检测安装版本
webpack -v -
** 新建文件夹aa(文件夹名自定义)**
打开命令符，在终端输入 cnpm init (一路回车) / cnpm init -y(不回车),
文件夹会多出一个package.json 文件，package.json是对项目的说明。 -
创建src文件,在src 文件在创建一个组建文件夹components,在components文件夹里创建nav.js
-
在nav.js中写入内容
//导出一个函数
export default function nav(){
console.log('123456789')
}
- 在src文件夹里创建一个app.js文件，并在文件中导入nav.js：（app.js是一个入口文件）
import Nav from './components/nav'
Nav()
- 在webpack.config.js中写入
const path =require('path') //把path引进来
module.exports={
entry:'./src/app.js', //入口文件
output:{ //出口文件
filename:'main.js', //输出之后，打包之后有一个文件夹来接收
path:path.resolve(__dirname, 'dist/') //输出之后文件路径
//dirname 是当前文件路径所在的目录 ‘dist/是main.js所在的目录里
}
}
- 在终端输入webpack, 这样在aa文件夹里会自动生成dist文件夹，dist的文件夹里面有main.js文件
- 在src文件夹里创建一个index.html文件，引入main.js
- 打开网页，就能看到console.log()里的内容
2. 安装react
安装： cnpm install react react-dom -S
在app.js中写入：
import React,{ Component } from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
<div>Hello</div>,
document.getElementById('root')
)
在index.html中 写入
<body>
<div id="root">
</div>
<script src="../dist/main.js"></script>
</body>
安装Es6：cnpm install babel-core babel-loader babel-preset-react --save-dev
安装babel-loader： cnpm install [email protected] -S
在webpack.config中写入
module:{
rules:[
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react']
}
}
]
}
]
}
安装完成
安装webpack服务器（热加载）
这样每次写完代码，不用在终端输入webpack进行打包，手动刷新页面
- 在终端输入
cnpm install webpack-dev-server html-webpack-plugin -S - 在webpack.config.js中配置内容
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
- 在package.json里面写入
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server"
},
- 在终端输入 cnpm run server ，便可以出现 localhost:8080
上一篇： CSS3动画属性之Transform
下一篇： vue使用Animate.css动画