var webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: __dirname + '/build',
filename: "bundle.js"
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react', 'stage-2']
}
}, {
test: /\.css$/,
loader: "style-loader!css-loader"
}]
}
};
OK,我们项目的基本配置终于完成了，是时候开始写Reac代码了.
React 基础 - 建立你的第一个Component
在上面的项目的基本配置基础上，我们开始书写React的第一个组件来熟悉React的写法与组件思想。
首先我们在项目根目录中新建一个 index.html 文件。 在这个基础工程中, 我们使用bootstrap的样式，直接引入一个cdn即可. 然后添加一个html标签 <div id="app"></div>，我们的app就会注入到这个div中。 最后再引入 <script src="bundle.js"></script>，这是最后打包生成的js代码。
以下是完整的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" > </head> <body> <div id="app"></div> <script src="bundle.js"></script> </body> </html>
建立一个新的文件夹 src. 我们app的大部分代码都将放在这个文件夹里面。在 src中建立 app.js，作为React App的根组件， 其他所有的组件都会注入到这个跟组件中。
首先我们需要导入react，现在都已经用ES6的语法， import React from 'react'; ， 然后我们要引入react-dom. 这里面有react中最重要的一个虚拟dom的概念.引入代码：import ReactDOM
from 'react-dom';
现在需要引入的依赖都已经完毕我们可以写第一个组件了：
class App extends React.Component {
render(){ // Every react component has a render method.
return( // Every render method returns jsx. Jsx looks like HTML, but it's actually javascript and functions a lot like xml, with self closing tags requiring the `/` within the tag in order to work propperly
<div>
Hello World
</div>
);
}
}
注意这里"Hello World"写在 div中. 所有的jsx代码都需要写在一个父div中.
最后我们需要把我们写好的组件render给Dom，这里就需要用到 ReactDOM.render 方法.
在 App.js 的下面添加: ReactDOM.render(<App />, document.getElementById('app'));
第一个参数就是我们App的根组件, 写作<App />的形式. 第二个参数就是我们的APP将要主要的DOM元素. 在这个项目中，就是我们在index中写的id为app的 div标签。