React.js：我从第一个项目中学到了什么

最初于2023年4月2日以简单英语的JavaScript发布到媒介。 在过去的几周中，我已经开始学习网络开发世界中的另一种备受追捧的技能：react.js。至少在JavaScript中对很多事情感到有些满意，在我的一些导师的要求下，我认为这是实现我的职业目标最合乎逻辑的一步。在本文中，我将与您分享一些我作为菜鸟所学到的东西。>

在某些情况下，我只使用React的类组件，从来没有使用功能组件，我不会在这里描述差异，因为我现在对功能组件一无所知。有一天，我可能会写一篇文章，以对比两种类型。即使在我写这篇文章时，每个人都建议使用功能组件，但是仍然需要知道类要工作的工作方式，因为较旧的React项目可能会使用它们。

对于我的第一个项目，我的任务是建立一个债务计算器，在该项目中，用户可以输入债务本金，利率，他们想要支付多少。这些输入字段有一些规定，但是您可以阅读有关该项目的readme.md中的信息（link github repo在文章的末尾），或者您可以自己尝试一下以查看其工作原理。用户“提交”付款后，将出现付款历史记录项目，并提供有关本金，利息和余额的详细信息。除非用户在第一笔付款中偿还全部债务，否则所有输入字段在首次付款时将禁用付款字段；如果还清了整个债务，则整个表格将被禁用，并且用户可以查看最终付款的历史记录，以及他们没有债务的消息。

>我将在开始学习时对以下问题提供以下问题的答案：

>

什么是react.js，为什么要使用它？

>

我如何开始构建React应用程序？

典型的组件是什么样的？

>

我如何在组件之间共享信息？

>

我可以在React中有条件地渲染事物吗？

我如何部署React应用程序？

什么是react.js，为什么要使用它？

React是一个前端JS库（不是框架？）），它使组织大规模项目更加容易。它最初是在Facebook上开发的。现在，它被广泛用于互联网的许多站点，例如Airbnb，BBC，Imgur和Netflix等。

React 代码由可重用的组件组成，这些组件必须位于 src 文件夹内，并且其名称必须采用 CamelCase 形式。许多组件都是用 JSX（JavaScript 语法扩展）编写的，这是 HTML 和 JS 的一种混合。我称这些组件为“可重用”，因为它们具有相同的结构，并且可以将不同的信息传递给它们并显示在网站上。组件也可以用普通的 JS 编写。然后可以将不同的信息（例如用户帐户信息）传递给这些组件，并且它们都将以相同的方式显示。

如何开始构建 React 应用程序？

要初始化 React 应用程序，请在终端中输入以下命令：

npx create-react-app project-name
cd project-name
npm start

npm start 将在默认浏览器的空端口中打开项目。
通常需要几分钟的时间才能完成所有设置，因此可以同时做一些富有成效的事情，例如将愚蠢的舞蹈上传到 TikTok，或者找出您将被分入哪个霍格沃茨学院（是的，我做了那个测验）。

官方文档现在建议使用框架来初始化React应用程序。我还没有使用过，但你可以在这里阅读更多相关信息。

典型的组件是什么样的？

就像我提到的，到目前为止我只使用过类组件，所以我只会在本文中介绍这些组件。我在第一个项目中使用的组件放在这里有点大，因此请参阅本文末尾链接的存储库中 src 文件夹中的 App.js 和 PaymentHistory.jsx 文件以查看它们的实际情况。尽管如此，典型的类组件可能如下所示：

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

请注意，我为每个

添加了一个键值

内的元素。这些对于应用程序正常运行的能力不一定至关重要，但最佳实践是包含它们。应在 return() 内向父元素的每个子元素添加唯一的键值。

像普通的 JS Class 一样，首先应该是 constructor()，然后是 super()。例如，如果我们希望将状态值或方法从一个类共享到另一个类，我们需要传入 props（“properties”的缩写）作为 constructor() 和 super() 的参数。

然后，我们应该初始化状态值。在我的债务计算器项目中，我需要使用多个状态值来跟踪与付款、本金、所欠利息和余额相关的各种金额，但我还使用了一些状态值来确定如何或是否应呈现某些内容。以下是我如何使用 isDebtFree 状态值在等于 false 时启用输入字段，并在等于 true 时禁用它：

npx create-react-app project-name
cd project-name
npm start

如您所见，我们可以使用SetState函数更改类组件中的状态值。请记住，SetState会异步运行，因此任何需要更新状态值的功能都可以将其放置在回调中。但是，您应该将这些回调保持尽可能简单，否则最终将进入令人困惑的“回调地狱”的世界，因此，在组件中创建方法时，请尽可能地按照单一责任性原则进行操作。您还应该知道，每次状态都在组件内更改，组件重新租赁。 不应直接在方法内部操纵DOM。这样做称为“对抗者”。注意如何通过在方法内部设置禁用属性来直接访问DOM元素，例如：

>

>而是，应将html元素的一部分设置为状态值，该状态值可能会根据组件中方法的执行进行更改，就像我在本段正上方的代码块中向您展示的那样。

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

>要注意的另一件事是，组件的return（）表达式应尽可能短，因此避免在此处放置任何类型的数学表达式，以及此处定义的功能。首先，当我尝试在付款字段中设置最小值和最大值时，我犯了这个错误，该付款字段会根据状态值更改，当数字输入本金和利率字段时，并且付款时会更改。 >

i而不是为每个值制作了一种方法，然后将最低和最大值设置为这些方法返回的内容。下面的第一个方法可行，但这并不是在React中进行操作的好方法，因为同样，组件的返回（）部分应尽可能简短且易于阅读。

>

以下方法更符合反应的精神：

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

如何在组件之间共享信息？
正如您在本文的第一个编码块中看到的那样，我使用道具从一个组件转到了另一个组件。现在，让我们看一下第二个组件如何在上面的第一个代码块中从应用程序中传递给它的内容。这就是那部分的样子，以防您懒得滚动一直以至于看到它：>

// DO NOT ACCESS DOM ELEMENTS DIRECTLY INSIDE A METHOD!
updateValues = () => {
  if (newBalance === 0) {
  document.getElementById('payment').disabled = true;
 }
}

现在，在ComponentOne中，让我们从应用程序导入此方法并将其用于使用：>

因此，在访问ChangeFont方法之后，我们在单击H1时称其为单击。

。

我可以在React中有条件地渲染事情吗？

是的！ React就是有条件地渲染事物。有几种方法可以做到。您可以使用一种方法来执行此操作，然后将元素的值设置为return（）中的元素值。因此，让我们再次使用债务计算器示例。假设我们想显示“您没有债务！”的信息。如果余额的状态值为0，并且如果余额超过0，则提示用户另一种付款的按钮。我们可以通过几种方式来执行此操作。

>让我们首先根据条件将该元素的值设置为方法返回的内容：

npx create-react-app project-name
cd project-name
npm start

使用一种方法可能是有利的，因为它允许我们更简洁。我们还可以添加更复杂的条件，就像在正常的JS函数中一样。

我们还可以在return（）内部使用三元运算符来完成相同的事情：>

如果逻辑很简单，可以用三元运算符表示，并且仍然很容易阅读，请继续使用；否则，使用方法总是可以接受的。

// Import React & ComponentOne:
import React from "react";
import ComponentOne from "./ComponentOne;

class App extends React.Component {
  /* Add props as params here, in case state values 
  are to be shared with another component */
  constructor(props) {
    super(props);

    // Initialize state values:
    this.state = {
      stateValue1: '',
      stateValue2: ''
    }
  }

  // Add some methods:
  changeFontColor = () => {
    // do something
  }
  changeFont= () => {
    // do something
  }

  // Determine what the component should render:
  render() {
    return (
      <div>
        <p key="pgHeader" onClick={this.changeFontColor}>Header</p>
        <p key="pgContent" onClick={this.changeFont}>Content</p>
        <p key="pgFooter">Footer</p>
      </div>
      // Give ComponentOne access to method changeFont by passing it in as a prop:
      <ComponentOne changeFont={this.changeFont} />
    )
  }
}
export default App;

> 例如，如果您有简单的条件，并且如果不满足条件，则没有显示任何内容，则可以做到这一点：>

如果this.state.totalbalance严格等于0，则该消息将显示。如果没有，那么什么都不会显示。

如何部署React应用程序？

// Initialize isDebtFree:
// Should go inside the constructor, but left out here for brevity
this.state = {
  // other state values
  isDebtFree: false
  // other state values
}

// Change isDebtFree to true if payment equals the total remaining balance
// This method will be called upon payment submission
updateValues = () => {
  // other stuff
  if (newBalance === 0) {
    this.setState({
      isDebtFree: true
    })
   }
}

// Set the disabled property of an input field to equal isDebtFree:
render() {
  return (
    <input disabled={this.state.isDebtFree} />
  )
}

>我通过Netlify部署了我的第一个React项目，我授予该项目访问该项目的GitHub存储库。在部署之前，您应该运行NPM运行构建，以构建为构建文件夹生产的应用程序。它捆绑在生产模式下反应，并优化构建以获得最佳性能。您可以像往常一样更新网站。

>

>在您的index.html文件中，您可能需要更改一些路径，包括favicon URL，in＆lt; head＆gt;。您只需要用./替换“％public_url％”。在＆lt; head＆gt;：中查找这样的说明

>因此，在构建第一个React项目时，我学到了一些东西。我对React的了解还不能深入，因此，如果您对我有任何建议或要添加的任何信息，请添加评论。如果您发现它有帮助，请发表好评论或留下某种反应，如果您认为其他人可以从阅读本文中受益，请将其传递给他们。

> 感谢您的阅读！

---

full react.js文档

我的第一个项目

Project的GitHub存储库

以上是React.js：我从第一个项目中学到了什么的详细内容。更多信息请关注PHP中文网其他相关文章！