本文介绍了如何从头搭建React应用，包括安装Webpack、配置Babel、处理JSX和ES6语法，以及设置React。通过手动配置，了解React应用的工作原理，实现热模块替换（HMR）并掌握Webpack和Babel的使用。
先附上原文链接 https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658
React如果脱离我们所熟悉的环境，可能就不会很好的工作了。原因是React中有很多的关键字以及语法是node目前支持不了的（作者写这篇文章的时候是9.3.0版本）。要想很好的运行React,需要进行一系列相当麻烦的设置。对此呢，Facebook已经提供了一套配置选项来快速启动React应用，那么老铁为啥还要写这篇文章呢？
我是这么认为的，create-react-app虽好，但是它让你对React应用变得更加的陌生了（至少在你手动使用eject命令之前是这样的）。当然，还是有很多驱使你自己配置一个react应用的动机，最起码你可以搞懂它的底层到底是怎么运作的。可以极大的满足你的好奇心。
正如我提到的，在你搭建React应用的过程中会有相当多的障碍。第一点是因为node有很多语法处理不了（比方说import/export以及JSX）。第二点原因是你需要build你的文件或者在开发的过程中为你的应用启动服务—尤其是这后一种情况相当的重要。
所幸的是，我们可以通过Babel以及Webpack来解决这些问题。
安装(Setup)
开始了，第一步创建一个目录。然后使用 npm init 初始化你的应用并使用你喜爱的编辑器打开它。此时也是使用 git init 进行初始化操作的好时候。在根目录下创建如下目录结构
想的再远一些，我们最终生成的应用在提交的时候会排除掉很多的文件比如node_module。此时我们还可以创建一个.gitignore文件来排除最后的node_modules以及dist文件。（在git bash下使用touch gitignore即可创建）
public目录用来存放所有静态资源以及我们最重要的的index.html文件，毕竟react会用它来初始化render我们的app。 下面的代码是用react文档中经过小小修改的源码。放心大胆的粘贴到你的index.html中。（当然要先在public文件夹中创建一个index.html文件）
<!-- sourced from https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>React Starter</title>
</head>
<body>
<div id="root"></div>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script src=
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
