React 项目迁移 Webpack Babel7的实现

不久前写了一篇 这里简单说下 React 项目的一些配置；

首先我们新建项目 react-web ，然后进入项目初始化 package.json ；

接下来我们安装 ，这里需要注意一点，是命令行已经单独提取出来了，我们不仅需要安装 webpack 还需要安装 。

接下来我们开始安装和 react 相关的依赖包；

接下来我们初始化 babel 的配置文件。

然后把下面内容粘贴进去；

实际上 webpack 4 是可以支持无配置构建的，但是我们还是按照传统的方式写一下配置文件;我们新建 webpack.config.js

接下来我们开始 做点和 React 组件相关的东西；

我们在 src 下新建目录 components ；

我们建立一个 Header.js 和 Footer.js .

Footer.js

class Footer extends Component {
constructor() {
super();
this.state = {
year: "2018"
};
}
render() {
return (
<footer class="ft">
copyright © {this.state.year}

); } } export default Footer;

Header.js

Logo

Home
• Link1
• Link2

); } } export default Header;

然后我们新增文件 src/index.js

rush:js;"> import React,{ Component } from "react"; import ReactDOM from "react-dom"; import Header from "../src/components/Header"; import Footer from "../src/components/Footer";

class ReactApp extends Component {
constructor() {
super();
}

render() {
return (
<div class="main">

); } }

ReactDOM.render(,document.getElementById('react-app'));

export default ReactApp;