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

发布时间：2020-12-15 08:20:51 所属栏目：百科来源：网络整理

导读：React 虽然是个很简单的 UI 库，API 也很少，但是在实际项目中却发现要搭配各种技术栈，例如 Webpack,Babel,Redux,React Router,CSS Modules,NPM,ES6/7 等等，仿佛怎么也学不完，很多人开始吐槽前端发展混乱，例如文章：2016 年学 JavaScript 是一种什么样的

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,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

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

<!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

import React from 'react';

class App extends React.Component {

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

export default App

main.js

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!