React 基础实践教程（一）：搭建简单的 React + ES6/7 + Webpack 开发环境_React

上一篇: React入门0x018: 高阶函数组件(H... 下一篇:React Native错误:in next relea...

React 基础实践教程（一）：搭建简单的 React + ES6/7 + Webpack 开发环境

发布时间：2019-07-03 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了React 基础实践教程（一）：搭建简单的 React + ES6/7 + Webpack 开发环境，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

React 虽然是个很简单的 UI 库，API 也很少，但是在实际项目中却发现要搭配各种技术栈，例如 Webpack, Babel, redux, React Router, CSS Modules, NPM, ES6/7 等等，仿佛怎么也学不完，很多人开始吐槽前端发展混乱，例如文章：2016 年学 JavaScript 是一种什么样的体验？吐槽归吐槽，扩充自己的技术栈，了解国外前端都在玩什么，毕竟不是坏事。
本系列教程不需要预先了解太多原理，跟着做，实践之后不懂再去查看文档，更有利于入门。
TIP: NPM 下载慢可以切换到淘宝源：NPM 切换淘宝源

1. 首先，建立项目目录，npm inIT 初始化 npm 项目

      
      
      
      
      
mkdir react-start
cd react-start
npm init
2. 全局安装 Webpack, Babel, Webpack-dev-server

      
      
      
      
      
sudo npm install babel webpack webpack-dev-server -g
3. 安装 react, react-dom


      
      
      
      
      
npm install react react-dom --save
4. 安装 Babel 转换器，需要用到插件 babel-PReset-react, babel-preset-latest，latest 即最新的 ES 规范，包括了 Async/Await 这些新特性。

      
      
      
      
      
npm install babel-loader babel-core babel-preset-react babel-preset-latest --save
5. 创建项目文件，main.js 即项目入口文件，App.js 即 React 组件主文件

      
      
      
      
      
touch index.htML App.js main.js webpack.config.js
@H_678_126@

6. Webpack 配置

      
      
      
      
      
module.exports = {
    entry: './main.js', // 入口文件路径
    output: {
        path: './',
        filename: 'index.js'
    },
    devServer: {
        inline: true,
        port: 3333
    },
    module: {
        loaders: [
            {
                test: /.js$/, // babel 转换为兼容性的 js
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['react', 'latest']
                }
            }
        ]
    }
}

6. 其他文件内容，一些基本的 React 和 ES6 基础，不做过多讲解了。
index.html

      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="

    
        
        React Start
    
    
        
        
    

" title="" data-original-title="复制">
      
      
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>React Start</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="index.js"></script>
    </body>
</html>

App.js

      
      
      From 'react';

class App extends React.component {

    render() {
        return Hello World
    }
}

export default App
" title="" data-original-title="复制">
      
      
import React from 'react';

class App extends React.Component {

    render() {
        return <div>Hello World</div>
    }
}

export default App

main.js

      
      
      DOM from 'react-dom';
import App from './App';

ReactDOM.render(, document.getElementById('app'))
" title="" data-original-title="复制">
      
      
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'))

7. 配置 npm scripts, 编辑 package.json

      
      
      
      
      
"scripts": {
   "start": "webpack-dev-server"
},
8. 基本的框架搭建完毕，npm start 然后打开 http://localhost:3333 试试

      
      
      
      
      
npm start