构建一个React App Pt。 1个

你好! 这是一个5部分的系列文章,我们将在其中构建一个React应用程序。 今天的教程将帮助我们开始设置应用程序,并了解引擎盖下的情况。

让我们开始吧!

介绍。

我已经在React中开发了一段时间,并且听说过所有热门术语。 Webpack,Babel,es6,热重装等……我们都知道这些术语,但是,我们实际上知道Webpack在做什么吗? 通天塔? 我知道我没有 据我了解,即使您不知道代码的确切功能,作为开发人员有时也需要使用谷歌代码并实施代码。 雇主需要我们快速行动,并且没有预算来给我们时间来实际学习正在发生的一切。 这就是我们所说的技术债务。 成为优秀的开发人员意味着您了解工作的基本原则。 花时间成为一名出色的开发人员。

所以! 今天,我对您的最大挑战是,了解您的建筑! 放慢脚步,更快。 当您了解应用程序的工作方式后,您将成为一个更好的开发人员。

入门。

我们今天创建的是一个简单的Hello World应用程序。 本教程将有17个步骤,请不要慌张,这确实很简单。 由于这是getting started教程,因此我假设大多数读者都是jr。 开发人员。 因此,我提供了一些链接以供进一步阅读。 此外,我还增加了一些招聘问题,可以在面试中被问到。

配置您的React应用程序:

步骤1:首先在终端中创建目录:

在您选择的终端中,创建目录,cd进入目录并启动NPM。

招聘问题:什么是NPM?

链接:花点时间学习NPM。 这是一篇介绍概念的出色文章。 https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/

第2步:将React安装到您的应用中

链接:以下是react-dom https://www.npmjs.com/package/react-dom的文档

https://reactjs.org/docs/react-dom.html

步骤3:将Webpack安装到您的应用中

招聘问题: webpack和browserify有什么区别? 为什么我要选择一个?

快速了解:Webpack使用模块系统,例如AMD,CommonJS,ES6 。 与其他模块捆绑器相比,Webpack具有很多优势。 这是我阅读的一些很棒的链接,这些链接帮助我设置了Webpack配置并更好地了解了webpack的功能。

链接:

https://blog.andrewray.me/webpack-when-to-use-and-why/

https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/

https://github.com/petehunt/webpack-howto

步骤4:下载Babel!

现在我们需要下载babel。 Babel是将您的es7或es6代码转换为当前Web浏览器支持的代码的救生器。 如果没有此功能,您的代码将在某些Web浏览器上中断。

链接:

本文非常适合为您提供一些为什么需要转码的历史记录: https ://www.fullstackreact.com/articles/what-are-babel-plugins-and-presets/

花5至10分钟,了解巴别塔的独特之处。 https://codemix.com/blog/why-babel-matters/

步骤5:安装webpack-cli

这是我收到的错误消息。

运行npm install webpack-cli可以让我通过此错误消息。

步骤6:配置babel

现在,让我们配置react应用程序以使用babel。

进入您的package.json文件

这里要注意的关键事项:我们告诉Babel使用预设。 通过添加预设,Babel现在知道如何转译您的代码以及支持什么。 通过添加:对您的预设列表做出反应,Babel现在知道支持JSX。

步骤7:配置Webpack

现在该制作保存webpack配置的文件了。

在您的终端中,运行mkdir webpack这将创建一个名为Webpack的新目录。 现在,我们将使用终端进入刚才创建的目录。 您可以通过键入cd webpack来执行此操作。现在,您将在终端中看到您位于目录webpack中。现在,我们将创建一个名为webpack.dev.config.js的新文件。您可以通过键入touch webpack.dev.config.js来执行此touch webpack.dev.config.js

以下是您将在终端中编写的命令。

步骤8 :配置Webpack

将此代码添加到webpack.dev.config.js文件中。

Webpack中的配置文件基本上是common.js模块。 当我们添加entry我们会告诉Webpack Hey! We want to start at this file! Hey! We want to start at this file! 在这种情况下,我们告诉它从我们的index.js文件开始。

步骤9:捆绑我们的源文件

在您的webpack.dev.config.js文件中,我们将添加一些代码行。 找到您将module.exports放在module.exports并在entry下方添加以下内容:

请确保在条目的右括号后加上逗号。

步骤10:安装更少的加载程序

如您所见,在规则内部,我们正在加载style-loader,css-loader和less-loader。 但是,这会破坏我们的应用程序,因为我们尚未安装它们。 我们现在将这样做。

步骤11:告诉Webpack捆绑什么

webpack.dev.config.js文件中,在加载器下方添加输出。 请确保在装载机的闭合支架后面加上逗号。

output键包含一组选项,可告诉webpack如何以及在何处输出包和资产。

链接:

如果您想了解它,请参阅以下Webpacks文档,以获取输出https://webpack.js.org/configuration/output/

步骤12:为开发服务器提供选项

同样,在webpack.dev.config.js内部,我们将在模块下面添加以下代码。

第13步:设置HTML:

好的,我们已经建立了Webpack。 是时候创建React会针对的index.html文件了。

在项目根目录中,创建index.html文件。

我们添加了我们稍后将针对的应用程序ID,以使我们的反应实质上得以实现。

以及将资源添加到我们的bundle.js文件中

步骤14:添加index.js

在根目录中,添加index.js

如您所见,我们正在获取在index.html文件中添加的ID

好的,现在我们已正确配置了所有定位条件,但未输出任何内容。 是时候渲染内容了!

步骤15:创建App.js

在app.js中,添加以下代码。

好的! 是时候精简我们的所有工作并解释其工作方式了。 这一切的工作原理是在您的1) package.json文件中,您有一个名为scripts的对象Scripts针对您的webpack.dev.config.js文件。 2)在其中,您有一个名为entry的对象,该对象针对./index.js 在该文件中,我们正在浏览整个应用程序,并找到应用程序的根目录。 ReactDom.render(, document.getElementById('app'))我们在index.html文件中创建了应用程序的根目录。 4)在该文件中,我们具有根id app以及一个脚本标签,该脚本标签告诉我们我们正在使用type/javascript并且该文件与我们的javascript捆绑在一起。 bundle.js好吧,现在,回到ReactDom.render(, document.getElementById('app'))index.js文件5) ReactDom.render(, document.getElementById('app'))我们正在渲染刚刚制作的文件,即App.js文件。 这是输出我们的段落, Coffee, Code and a react app yo!

步骤16:我们快完成了!

用此新脚本文件替换脚本json对象。

步骤17:运行应用程序!

在控制台中,键入npm run dev并转到localhost:/8080以查看您的应用程序