第一次进入新的领域，令人兴奋，又令人备受折磨。
第一个接书上来的react组件，写起来也是一波三折。
不提class大小写，不提如何用低版本的prop-types作验证，不提在eslint里屏蔽一些问题("react/prefer-stateless-function": "off","import/no-named-as-default": 0,"import/no-named-as-default-member": 0,)，不提HtmlwebpackPlugin如何生成模板，更不提空格和tab，单引号和双引号，XXXX，，啥也不提，上个文件记录，知道我曾查过很多资料，解决过这些问题。
package.json
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"eslint": "^4.11.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx": "0.0.2",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.5.1",
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
},
"dependencies": {
"prop-types": "^15.6.0",
"react": "^16.1.1",
"react-dom": "^16.1.1"
}
}
.babelrc
{
"presets": ["es2015", "react"],
"plugins": ["transform-object-rest-spread"],
"env": {
"development": {
"presets": ["react-hmre"]
}
}
}.eslintrc
{
"extends": "airbnb",
"rules": {
"comma-dangle": ["error", "never"],
"linebreak-style": ["error", "windows"],
"import/no-named-as-default": 0,
"import/no-named-as-default-member": 0,
"react/prefer-stateless-function": "off",
},
"env": {
"browser": true
}
}webpack.config.js
var path = require("path");
var webpack = require("webpack");
var HtmlwebpackPlugin = require("html-webpack-plugin");
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, "app");
var BUILD_PATH = path.resolve(ROOT_PATH, "build");
module.exports = {
entry: {
app: path.resolve(APP_PATH, "app.jsx")
},
output: {
path: BUILD_PATH,
filename: "bundle.js"
},
resolve: {
extensions: [".js", ".jsx"]
},
devtool: "eval-source-map",
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
module: {
rules: [
{
test: /\.jsx?$/,
enforce: "pre",
loaders: ["eslint-loader"],
include: APP_PATH
},
{
test: /\.jsx?$/,
loaders: ["babel-loader"],
include: APP_PATH
}
]
},
plugins: [
new HtmlwebpackPlugin({
title: "My first react app",
template: 'my-index.ejs'
})
]
}app.js
import React from 'react';
import { render } from 'react-dom';
import Profile from './Profile';
const props = {
name: 'viking',
age: 20
};
render(<Profile {...props} />, document.getElementById('container'));
Profile.js
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};
export default class Profile extends React.Component {
render() {
return (
<div className="profile-component">
{/* this.props就是传入的属性 */}
<h1>我的名字叫{this.props.name}</h1>
<h2>我今年{this.props.age}岁</h2>
</div>
);
}
}
Profile.propTypes = propTypes;
my-index.ejs
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="container"> </div>
</body>
</html>最后的END.
时间： 2024-07-30 16:27:31