主要是一些新的写法，和书上不一样，需要在这里保存好，到时直接CP。。：）
由于对eslint的语法检查，没搞好空格和TAB缩进，暂时取消了。
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",
"indent":[1,2],
"prefer-destructuring": "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'
})
]
}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>app.jsx
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'));
App.jsx
import React from 'react';
import PropTypes from 'prop-types';
import Hobby from './Hobby'
const propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired
};
export default class Profile extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: 0,
hobbies: ['skateboarding', 'rock music', 'play']
};
this.likedCallback = this.likedCallback.bind(this);
this.addHobbyCallback = this.addHobbyCallback.bind(this);
}
likedCallback() {
let liked = this.state.liked;
liked += 1;
this.setState({
liked
});
}
addHobbyCallback() {
let hobbyInput = this.refs.hobby;
let val = hobbyInput.value;
if (val) {
let hobbies = this.state.hobbies;
hobbies = [...hobbies, val];
this.setState({
hobbies
}, () => {
hobbyInput.value = '';
});
}
}
componentDidMount() {
setTimeout(() => {
this.likedCallback();
}, 1000);
}
render() {
return (
<div className="profile-component">
{/* this.props就是传入的属性 */}
<h1>我的名字叫{this.props.name}</h1>
<h2>我今年{this.props.age}岁</h2>
<button onClick={this.likedCallback}>给我点赞</button>
<h2>总点选数: {this.state.liked}</h2>
<h2>我的爱好：</h2>
<ul>
{this.state.hobbies.map((hobby, i) => <Hobby key={i} hobby={hobby} />)}
</ul>
<input type="text" ref="hobby" />
<button onClick={this.addHobbyCallback}>增加爱好</button>
</div>
);
}
}
Profile.propTypes = propTypes;
Hobby.jsx
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
hobby: PropTypes.string.isRequired
};
//class Hobby extends React.Component {
// render() {
// return <li> {this.props.hobby}</li>
// }
//}
function Hobby(props) {
return <li>{props.hobby}</li>;
}
Hobby.propTypes = propTypes;
export default Hobby;最后的样子
时间： 2024-10-31 13:55:41