Web端 React 基础（二） 基本应用

笔记

一些npm命令的 小知识 (看官方文档)

-S就是--save的简写，就行npm默认一个start的字段，你可以不必输入npm run start 而只需输入npm start，这两个效果是一样的。
-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面。

"dependencies": {
... 正常
},
"devDependencies": {
··· 开发
}

一些知识的补充

//只是插件
babel-loader
//babel 核心代码
babel-core

让 webpack 支持 react 语法

修改配置文件

const path = require('path')

module.exports = {
// 设置打包的一个入口
entry: {
app: path.join(__dirname, '../client/app.js'),
},
//打包输出的地址
output: {
//输出的文件名
filename: '[name].[hash].js',
//输出的文件 存放地址
path: path.join(__dirname, '../dist'),
//静态资源文件，引入时的路径  -- change
publicPath: ''
},
// 新增这些
module: {
rules: [
{
test: /.jsx$/,
//支持 es6+ 编译工具，官方默认支持
loader: "babel-loader"
},
{
test: /.js$/,
loader: "babel-loader",
//不需要编译
exclude:[
path.join(__dirname,"../node_modules")
]
}
]
}
}

安装babel

npm i babel-loader -D

//核心代码
npm i babel-core  -D

创建 .babelrc 文件

{
//代表 babel 支持的语法
"presets": [
["es2015",{"loose":true}],
"react"
]
}

继续安装 babel-preset-es2015

npm i babel-preset-es2015 babel-preset-es2015-loose babel-preset-react

安装 html-webpack-plugin

npm i html-webpack-plugin -D

新增到 webpack.config.js 配置

const path = require('path')
//新增
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
entry: {
...
},
output: {
...
},
module: {
...
},
// 新增
plugins: [
new HTMLPlugin()
]
}

hello react

import React from 'react';

export default class App extends React.Component {
render(){
return (
<div>
hello react
</div>
);
}
}

import React from "react";
import ReactDom from 'react-dom'
import App from './App.jsx'

ReactDom.render(<App />, document.body)

运行 hello wrold

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')

module.exports = {
// 设置打包的一个入口
entry: {
app: path.join(__dirname, '../client/app.js'),
},
//打包输出的地址
output: {
//输出的文件名
filename: '[name].[hash].js',
//输出的文件 存放地址
path: path.join(__dirname, '../dist'),
//静态资源文件，引入时的路径
publicPath: ''
},
module: {
rules: [
{
test: /.jsx$/,
//支持 es6+ 编译工具，官方默认支持
loader: "babel-loader"
},
{
test: /.js$/,
loader: "babel-loader",
//不需要编译
exclude:[
path.join(__dirname,"../node_modules")
]
}
]
},
plugins: [
new HTMLPlugin()
]
}

npm run build