第一次使用React构建Web应用程序？ 然后，它必须是您打算设置的简单“ Hello World”类型的应用程序。 一个可以保证您使用React.js的流畅的第一手经验……
因此，您想知道：
“ 在React中 构建基本应用程序 最快的方法是 什么？”
然后是一个问题，接着是……无数其他问题：
- “我应该使用哪些依赖项？”
- “如果这只是我要创建的简单Web应用程序，我应该使用什么React堆栈？”
现在是时候从质疑自己转到编写代码了，您不觉得吗？ 这是一个关于如何从头开始创建React应用程序的简单易学的教程。
1.创建一个新的React Project文件夹
第一步是开始一个新的React项目。 明显！
注意：首先要确保您的环境中已安装NPM和Node ！
为此，只需在下面运行命令：
npm install -g create-react-app
多田！ 您的React样板应用程序创建者刚刚安装了蜜蜂！
现在，您将运行的第二个代码将自己创建“ Hello World” React应用程序：
建立反应应用程式的Hello World
在应用程序的结构上运行一个假想的放大镜，您不禁会注意到其中的3种主要文件类型：
- public / index.html文件
- src / index.js文件
- src / App.js文件
然后更深入地扫描应用程序的主干：
- 具有id 根的div
- 这段代码在下面的index.js.file中：
ReactDOM.render（，document.getElementById（'root'））;
如果我们要将此代码段翻译成简单的语言，它将是这样的：
React通过使用根ID将您的应用程序组件注入div中。
2.编写最简单的React组件
“但是，更确切地说，什么是应用程序组件？”
将它作为React的约定，以对JavaScript文件和组件使用相同的名称。
现在，您的基本组件代码看起来像这样：
从'react'导入React，{组件};
App类扩展了组件{
render（）{
返回（
世界您好！
）;
}
}
随时为其创建一个JavaScript类，并从Component类进行扩展。
接下来， 实现render（）方法 ，该方法将返回一整套元素（与React 16之前的版本不同，当时必须为每个实现的每个render方法返回一个元素）。
然后，在应用程序目录中运行npm start命令，您将在http：// localhost：3000上看到“ Hello World”文本消息。
你好，世界！
3.使用React和JSX构建Web应用程序
我觉得我应该从定义JSX开始，对吧？ 在我继续深入研究如何在React中使用它的细节之前：
JavaScript语言（即模板语言）的扩展，其结构类似于HTML。 一个与React组成出色团队的人。
它的真正“威力”在于……使您能够在类似HTML的标记中编写HTML组件和React组件：
这就是我们正在此处构建的“ Hello World”应用程序中的JSX“实际应用”：
如下代码：
const元素=
（
你好，世界！
）;
…在下面被编译为熟悉的JavaScript代码 ：
const element = React.createElement（
'h1'，
{className：'greeting'}，
'你好，世界！'
）;
看到？ 熟悉的HTML标记语言使任何开发人员都可以更轻松地构建应用程序的代码！
这是JSX的主要角色，也是它与React完美配合的原因。
4.如何在React.js中使用状态与道具
在使用React构建Web应用程序时如何创建另一个组件？
让我们将其命名为“ Mary” ：
从'react'导入React，{组件};
玛丽类扩展了组件{
render（）{
返回（
嗨，我是玛丽
）;
}
}
导出默认的Mary;
太棒了！ 接下来，我们可以将它作为子组件包含到我们现有的React App组件中：
从'react'导入React，{组件};
从'./Mary'导入Mary；
App类扩展了组件{
render（）{
返回（
世界您好！
）;
}
}
导出默认应用程序；
注意：是否注意到“ Mary”组件的导入声明？ 它起着关键作用，因为没有它，我们的React应用程序将无法运行。 这是因为React无法独自识别与Mary标签相对应的组件。
现在想知道如何操作“玛丽”组件？ 您如何控制其行为？
通过操纵它的状态对象 ，方法就是这样！
注意：每个React组件都有自己的状态对象。
从'react'导入React，{组件};
从'./Mary'导入Mary；
App类扩展了组件{
constructor（）{
超（）;
this.state = {
问候：“世界你好！”
}
}
render（）{
返回（
{this.state.greeting}
）;
}
}
导出默认应用程序；
是否看到与状态对象相对应的“ greetings”属性（具有“ Hello World”值）？ 请记住，您可以随意添加所需的任意多个属性。
接下来，如何尝试将数据从我们的App组件传递到其子组件Mary：
从'react'导入React，{组件};
从'./Mary'导入Mary；
App类扩展了组件{
constructor（）{
超（）;
this.state = {
问候：“ Hello World！”，
parentMessage：“你好，玛丽！”
}
}
render（）{
返回（
{this.state.greeting}
）;
}
}
导出默认应用程序；
注意到那里的“ newMsg”键了吗？ 正是这个密钥负责数据传输。
现在，关于子组件“ Mary”：
从'react'导入React，{组件};
玛丽类扩展了组件{
构造函数（道具）{
超级（道具）
this.state = {
问候：props.newMsg
}
}
render（）{
返回（
{this.state.greeting}
）;
}
}
导出默认的Mary;
如果您愿意对这段代码进行深入的研究，您会发现其中存在一个“ props”方法参数。
请记住， 正是这个对象存储了从父组件传输到子React组件的所有数据。
另外，您应该能够检测到的另一个“详细信息”是“ newMsg”属性（从父/应用程序组件传输）； 我们用它来初始化Mary组件的状态。
5.如何使用React（组件）生命周期挂钩
我不会涉及太多细节，因为在涉及以下方面，React的文档已经不仅仅是“启发”了：
- 为React组件的每个状态调用不同的生命周期方法 （或挂钩）
- 在开发过程中触发每个钩子的准确时间
不过，我将简要补充一下，将在您的React组件的整个生命周期中使用的所有这些方法分为3个主要类别：
- 安装挂钩 ：当您的React组件在浏览器页面中呈现时，一开始就使用它们
- 更新挂钩 ：当您的组件在网页上重新呈现时，触发它们。 如果/当对状态/道具对象进行更改时，就会发生这种情况
- 卸载钩子 ：从DOM中删除组件后不久调用componentWillUnmount（）钩子
注意：从React 16开始，钩子的集合增加了一个全新的钩子： componentDidCatch（） ！ 在组件的其他生命周期方法中处理异常时，将其触发。
换句话说：每当使用React构建Web应用程序的组件无法正常运行时调用它！
至于React通过它创建的Virtual DOM操作DOM的特定方式，请随意阅读我们关于该主题的文章：React Virtual DOM的工作原理！
结束 ！
现在轮到您了：完成此处包含的所有步骤，并逐步设置您的第一个基本React应用程序 ！
文章最初发表在 OPTASY.com上 。
