如何使用React开始构建Web应用程序:使用React.js创建第一个应用程序的5个步骤

第一次使用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的文档已经不仅仅是“启发”了:

  1. 为React组件的每个状态调用不同的生命周期方法 (或挂钩)
  2. 在开发过程中触发每个钩子的准确时间

不过,我将简要补充一下,将在您的React组件的整个生命周期中使用的所有这些方法分为3个主要类别:

  1. 安装挂钩 :当您的React组件在浏览器页面中呈现时,一开始就使用它们
  2. 更新挂钩 :当您的组件在网页上重新呈现时,触发它们。 如果/当对状态/道具对象进行更改时,就会发生这种情况
  3. 卸载钩子 :从DOM中删除组件后不久调用componentWillUnmount()钩子

注意:从React 16开始,钩子的集合增加了一个全新的钩子: componentDidCatch() ! 在组件的其他生命周期方法中处理异常时,将其触发。

换句话说:每当使用React构建Web应用程序的组件无法正常运行时调用它!

至于React通过它创建的Virtual DOM操作DOM的特定方式,请随意阅读我们关于该主题的文章:React Virtual DOM的工作原理!

结束

现在轮到您了:完成此处包含的所有步骤,并逐步设置您的第一个基本React应用程序

文章最初发表在 OPTASY.com上