报有一个初学者的心态

Authored by Shinjni Maheshwari and Sree Shatdarsanam

Disclaimer: The following article is no way claims or quotes strong opinions about the technology in the immersive world of Web/JavaScript/ReactJS. It is simply a humble attempt by the authors to share a foundational perspective about the library in a lucid, visually rich manner. ⚠️

免责声明 ：以下文章绝不会在Web / JavaScript / ReactJS的身临其境的世界中声明或引用对该技术的强烈意见。 作者以一种清晰，丰富的视觉方式来分享关于该库的基本观点，这只是一个卑微的尝试。 ⚠️

While there are tons of helpful tutorials that set a good practical foundation for using this library, the main goal of this article is to provide a theoretical introduction to help appreciate and develop intuition to use the basic features of React and also point to subsequent contextual references to other publications. 📑

虽然有大量有用的教程为使用该库奠定了良好的实践基础，但本文的主要目的是提供理论介绍，以帮助理解和发展使用React基本功能的直觉，并指向后续的上下文参考。其他出版物。 📑

The article IS NOT A Programming tutorial or A strict rule book.It is Collection of ideas to introduce ReactJS

👓 The article is best tailored for the following audience:

is本文最适合以下受众：

💻 Programmers, Technology Consultants with looking to understand the latest trends in web development.

💻 程序员，技术顾问 ，希望了解Web开发的最新趋势。

💻 Developers with some experience in JavaScript and CSS wanting to appreciate ReactJS concepts before getting hands-on.

with 具有JavaScript和CSS经验的 开发人员 希望在动手之前先了解ReactJS概念。

So, Please put on your Developer caps 🎩 and read the rest! 🤓

因此，请戴上开发人员帽s并阅读其余内容！ 🤓

React Library —简介 (React Library — An Introduction)

Jordan Walke, a software engineer who currently works in the ads interfaces team at Facebook released a prototype of ReactJS back in 2011 and used it for the Facebook news feed and later on Instagram in 2012. Lately, ReactJS has become an extremely popular library in the world of front-end design and development. There is a beautifully rendered timeline of the React’s evolution in the references section at the end if you are interested.

乔丹·沃克(Jordan Walke)是一名软件工程师，目前在Facebook广告接口团队工作，早在2011年就发布了ReactJS的原型，并将其用于Facebook新闻提要，随后于2012年在Instagram上使用。最近，ReactJS成为了一个非常流行的库。前端设计和开发的世界。如果您感兴趣的话，在参考部分的末尾有一个精美的React演变时间表。

WHY REACT- in the realm of web design?

为什么要在网页设计领域做出React？

ReactJS inherits the power and main advantages of the JavaScript programming language that are needed to design responsive web pages by:

ReactJS通过以下方式继承了设计响应式网页所需JavaScript编程语言的强大功能和主要优点：

Not affecting server performance
不影响服务器性能
Enabling an event-driven application design
启用事件驱动的应用程序设计

Quite popularly leveraged with Node.js and Node Package Manager, React provides mechanisms to dynamically build user interfaces. Put more simply, it is a modern and interactive approach to presenting information to a user through a compositional setting.

React广泛使用Node.js和Node Package Manager，React提供了动态构建用户界面的机制。简而言之，它是一种现代的，交互式的方法，可以通过合成设置向用户展示信息。

The power of React is in building composable user interfaces that break down the UI by creating smaller units called components (more about it below). A component can be understood as an encapsulated unit (function or class) that manages its data and returns a React element (a JS Object) to describe a section of UI.

React的强大功能在于构建可组合的用户界面 ，这些界面通过创建称为组件的较小单元来破坏UI(在下文中对其进行详细介绍)。组件可以理解为一个封装的单元(函数或类)，它管理其数据并返回一个React元素(一个JS Object)来描述UI的一部分。

React is “declarative” which means that we just declare WHAT we want a component to look like and let React handle the HOW of it at the DOM (document object model) level. It applies to more than rendering the web page DOM and advanced libraries take a declarative approach to managing state such as Redux.

React是“声明式”的，这意味着我们只需要声明一个组件看起来像什么，然后让React在DOM(文档对象模型)级别处理它的HOW。它不仅适用于呈现网页DOM，而且高级库采用声明性方法来管理状态，例如Redux 。

As a business owner or a product manager, why would I choose to use ReactJS for my application ❔

作为企业主或产品经理，我为什么选择在应用程序中使用ReactJS❔

From a business standpoint, below are a few reasons why you would want to pick React for your application:

从业务角度来看，以下是为什么要为应用程序选择React的一些原因：

Low Learning Curve — React has a low learning curve for folks with prior programming experience who can easily cross-train and add the library to their existing product tech-stack. In spite of React’s ideas about JSX and Redux being daunting concepts at the beginning, React easily integrates into the JavaScript ecosystem but offers a way to render the front-end more programmatically than its peer like VueJS.
低学习曲线 -对于具有先前编程经验的人，React的学习曲线很低，他们可以轻松地交叉训练并将库添加到其现有产品技术堆栈中。尽管React在一开始就认为JSX和Redux是令人生畏的概念，但React可以轻松地集成到JavaScript生态系统中，但是提供了一种比VueJS等同行更以编程方式呈现前端的 方法。
Search engine Optimizable — Traditionally, modern JavaScript based libraries and frameworks always faced the problem of page indexing. When a web-spider like a Googlebot performs crawling on a web-app, on-demand loading of React makes the bot index very less HTML content on the page. Using Pre-renderers or leveraging Server-side rendering with external frameworks such as Next.js can overcome this challenge and make the application more SEO friendly.
搜索引擎可优化—传统上，现代基于JavaScript的库和框架始终面临页面索引问题。当像Googlebot这样的网络蜘蛛在网络应用程序上执行爬网时，按需加载React会使机器人索引在页面上HTML内容少得多。使用预渲染器或将服务器端渲染与诸如Next.js之类的外部框架一起使用可以克服此挑战，并使应用程序对SEO更友好。
UI breakdown — Instead of worrying about the web app as a single entity — clients, designers, managers, developers can collaborate on specific components at a time which can help compartmentalize efforts and speed up product development.
UI分解 —客户，设计人员，管理人员，开发人员可以一次在特定组件上进行协作，而不必担心将Web应用程序作为一个单独的实体，这有助于分隔工作并加快产品开发。
Responsive design — ReactJS, with its power to expand through tools, libraries combined with some good practices enable the creation of fully responsive and scalable web apps to cater to an organization’s business.
响应式设计 -ReactJS具有通过工具，库进行扩展的能力，并结合了一些良好的实践，可创建完全响应且可扩展的Web应用程序，以满足组织的业务需求。
Virtual DOM to render apps faster — The library uses a virtual DOM to render HTML, monitor changes in the elements, and re-render only specific pieces where data has changed. Especially during partial data refreshes the app gets extremely responsive and positively impacts user experience.
虚拟DOM 可以更快地呈现应用程序 -库使用虚拟DOM呈现HTML，监视元素中的更改以及仅重新渲染数据已更改的特定片段。尤其是在部分数据刷新期间，该应用程序会变得非常敏感，并积极地影响用户体验。
Strong & Growing Community base — ReactJS is a reliable present-day technology started by the tech-giant Facebook and one that is here to stay owing to its strong adoption and support from some major tech-heavy corporations such as Netflix, Airbnb, PayPal, Uber, Instagram, Flipboard etc. Besides detailed documentation ReactJS has a lot of support from the Stack Overflow and has over 250,000 questions discussed about it!
强大且不断发展的社区基础 -ReactJS是由技术巨头Facebook发起的可靠的当今技术，由于它已被Netflix，Airbnb，PayPal， Uber，Instagram，Flipboard等。除了详细的文档外，ReactJS 在Stack Overflo w上有很多支持，并讨论了25万多个问题！

When providing the best possible rendering performance for your application becomes one of the top priorities, ReactJS shines well in this area under the condition that the application leverages its compositional nature well by following some best practices. The indirect benefit from this is that it optimizes maintenance by breaking down the interface into functionally-specific atomic components.

当为您的应用程序提供最佳的渲染性能成为当务之急时，ReactJS在该领域表现出色，条件是该应用程序通过遵循一些最佳实践很好地利用其合成性质。间接的好处是它通过将接口分解为功能特定的原子组件来优化维护。

As a software engineer or project manager, why would I choose to use React for developing my web application❔

作为软件工程师或项目经理，我为什么选择使用React开发我的Web应用程序❔

From an application development front, this structure offered by ReactJS can have some added advantages:

从应用程序开发的角度来看，ReactJS提供的这种结构可以具有一些附加的优点：

Lesser development time — This modular structure allows code re-usability to a great extent which results in rapid development with good code quality
更少的开发时间 -这种模块化结构允许代码在很大程度上可重用，从而以良好的代码质量实现快速开发
Easier on boarding — For the new developers joining a software development project, learning isolated parts of the code would be a much easier task — thanks to React’s compositional structure and its focus on the front-end and User Interface side of an application.
易于上手 -对于新加入软件开发项目的开发人员来说，学习代码的孤立部分将是一件容易得多的任务-这要归功于React的组成结构以及对应用程序前端和用户界面侧的关注。
Separation of Concerns (SOC) — While ReactJS itself does not encourage or help guide a developer to do SOC, through best practices it offers flexibility and fosters very strong SOC patterns such as the container-component pattern.
关注点分离(SOC)-虽然 ReactJS本身并不鼓励或帮助指导开发人员进行SOC，而是通过最佳实践来提供灵活性并促进非常强大的SOC。模式， 例如容器组件模式。

React advocates composition through generic & specific components but is strictly neither DRY (Don’t Repeat Yourself) nor WET (Write Every Time).

R eact主张通过通用和特定的组件进行组合，但严格来说既不是 DRY (不要重复自己)也不是 WET (每次写入)。

It allows DRY when repeated logic is exported to a singular location through abstraction and imported where needed. However, this MUST be approached with a pinch of salt and needs more context than following as a strict rule. In other words, the WET code base is at times more powerful for building React applications and is widely used through the practices of Containment and Specialization.

它允许DRY 重复的逻辑通过抽象导出到单个位置，并在需要时导入。但是，必须严格执行此步骤，并且比严格遵循以下规则需要更多的上下文。换句话说， WET节点库有时对于构建React应用程序更为强大，并通过遏制和专业化实践得到了广泛使用。

PROS and CONS of the library from a platform development’s point of view:

从平台开发的角度来看库的优点和缺点：

ReactJS螺母和螺栓-技术实施概述 (ReactJS Nuts & Bolts — A Technical Implementation Overview)

项目文件结构🔗 (Project File Structure 🔗)

Yes it does need its own section owing to countless dependencies that go with the library 😄

是的，由于与库一起存在的无数依赖关系，它确实需要自己的部分😄

Like most libraries out there, projects developed using ReactJS involve other library dependencies either to re-use functionality, implementing styling, generate test scripts, bundle the code to name a few.

像其他大多数库一样，使用ReactJS开发的项目还涉及其他库依赖关系，以重用功能，实现样式，生成测试脚本，将代码捆绑在一起。

Many developers use the create-react-app — a node managed package that creates a pre-configured project to help jump start into building basic react components. It installs the latest version of React, React-DOM, as well as the latest version of react-scripts - a development dependency that manages and helps to start, test and build your app.

许多开发人员使用create-react-app (一个节点托管的程序包)来创建预配置的项目，以帮助快速开始构建基本的React组件。它安装了最新版本的React，React-DOM以及最新版本的react-scripts(一种开发依赖项，可以管理并帮助启动，测试和构建您的应用程序)。

Its file system offers a good start to understanding how a React based project might be structured →

它的文件系统为理解基于React的项目的结构提供了一个良好的起点→

It is possible that other project team members such as graphic designers, consultants, etc. can manage the non-JavaScript resources/assets such as images, animations. Hence, keeping them intact can help in the maintenance and offers better file management, version monitoring, and control.

其他项目团队成员，例如图形设计师，顾问等，可能可以管理非JavaScript资源/资产，例如图像，动画。因此，保持它们完好无损可以帮助维护，并提供更好的文件管理，版本监视和控制。

Please note that there is no ‘right’ way to do this and comes often at the discretion of bucketing files for minimal maintenance overload and maximum efficiency.

请注意，没有“正确”的方法来执行此操作，并且通常需要对文件进行存储区管理以最大程度地减少维护过载和最大效率。

npm资料库：互联世界🌎 (npm repository: A connected world 🌎)

React allows interfacing with external libraries and frameworks like the above to provide a richer UI

What makes the world of React, a ‘flexible’ front-end library is its connection with the bigger ecosystem of only the world’s largest software registry — npm

使得React世界成为“灵活的”前端库的原因是它与仅全球最大的软件注册机构npm的更大生态系统的连接

Like every other open-source repository, npm has:

与其他所有开源存储库一样，npm具有：

npm registry: public database to install JS libraries (like react, express, babel-core)

npm注册表：安装JS库的公共数据库(如react，express，babel-core)

npm CLI (Command Line Argument): to interact with the npm registry for your projects

npm CLI(命令行参数)：与项目的npm注册表进行交互

npm website: to maintain your repositories, search for other packages

npm网站 ：维护您的存储库，搜索其他软件包

Next time someone wants you to npm install something, you now know what you are tapping into!

下次有人要您npm安装某些东西时，您现在知道要使用的内容了！

组件 (Components)

The biggest advantage with the React is to ‘compartmentalize’ a page into reusable building blocks that are loosely coupled with each other. Think of any web page as an interplay between these foundational pieces a.k.a Components.

React的最大优点是将页面“分区”为可松散使用的可重用构建块。可以将任何网页视为这些基础部件(也称为组件)之间的相互作用。

A Component can be described as a JS function/class made of reusable bits of code that ultimately renders a markup. Before tackling them in below sections, keep in mind what these two terms mean:

组件可以描述为JS函数/类，它由可重用的代码位组成，这些代码最终会呈现标记。在以下各节中讨论它们之前，请记住以下两个术语的含义：

props a.k.a properties are values that a component uses to either take in / pass down to another component that it imports. props values cannot be changed by the component that takes in i.e. they are immutable with in the component.

props aka属性是组件用来接收/传递给它导入的另一个组件的值。 props的值不能被接受的组件更改，即它们在组件中是不可变的。

State holds data that a component subscribes to, listens to changes in it and refreshes every time the state updates. This can be internal or external state.

状态保存组件订阅的数据，侦听组件中的更改，并在每次状态更新时刷新。这可以是内部或外部状态。

What makes it powerful is that every component independently maintains a state internally and triggers a re-render of the component when its state changes or when the enclosing parent/owner component modifies props that were passed into it. Parent components can control a component that they enclose by passing on their state values down to it through the vehicle of ‘props’.

之所以强大，是因为每个组件在内部独立维护一个状态，并在其状态发生变化时或在封闭的父/所有者组件修改传递给它的道具时触发组件的重新渲染。父组件可以通过“ props”工具将其状态值向下传递给它们，从而控制它们所包围的组件。

As you can see from this, props and state have a strong collaboration and together make a component reactive in the application. This component-based approach when designing a website makes building the User Interface equivalent to playing with Lego blocks!

从中可以看到，道具和状态之间有着很强的协作性，并且使组件在应用程序中具有响应性。设计网站时，这种基于组件的方法使构建用户界面等效于玩乐高积木！

组件层次结构 (Component Hierarchy)

When components are wrapped by another component, a hierarchy is automatically created that establishes a parent-child relationship between the wrapping and each of the wrapped components.

当组件被另一个组件包装时，会自动创建一个层次结构，该层次结构在包装和每个包装的组件之间建立父子关系。

The official documentation on ReactJS - ‘Thinking in React’ explains beautifully, how components that appear within another component in the mock, should appear as a child in the hierarchy

ReactJS的官方文档-“ React中的思考 ”很好地解释了， 在模拟中出现在另一个组件中的组件 应如何在层次结构中作为子代出现

These components are of two types:

这些组件有两种类型：

Class-based component
基于类的组件

Introduced with ES6, a React class-component is ‘object-oriented like’ and is a JS class that can be instantiated and carries/manages its life-cycle as well as its state.

在ES6中引入的React类组件是“类似于对象的”，是一个JS类，可以实例化并承载/管理其生命周期和状态 。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// if required, user defined components can be returned as well

2. Functional component

2. 功能组成

Think of it as just a JS function that takes props as an argument and returns a React element. Unlike class-based, these do not have state and life cycle methods but can be used when a simple conditional rendering is needed — the use case where is very simple that state management and ref. forwarding is not needed.

可以将其视为只是一个以props为参数并返回React元素的JS函数。与基于类的方法不同，它们没有状态和生命周期方法，但是可以在需要简单的条件呈现时使用-状态管理和引用非常简单的用例。不需要转发。

Although the render times do not vary that largely between these two with functional components being slightly faster, the code gets significantly ‘minified’ in case of functional as compared to class-based. Yet, class components have their place and are slowly being replaced with Hooks (ensuring old code base runs a.k.a backward compatibility).

尽管两者之间的渲染时间变化不大，但功能组件的速度稍快一些，但是与基于类的功能相比，在功能性的情况下代码显着“最小化”。但是，类组件已经占有一席之地，并逐渐被Hooks取代(确保旧代码库也可以向后兼容)。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// if required, user defined components can be returned as well

After breaking down the mock up into its smallest possible components, it is beneficial to establish a base set of components that would be used across the entire application. Once established, tackling a page in a web application can be handled from a top-down (parent containers => child components) approach by building out the relevant containers, sections, and structure for the application, and then inserting the base components where they belong. We then work from the top-down as well as from the bottom-up to create a consistent experience, speed up development, and establish solid boundaries in your application.

将模拟分解为尽可能小的组件后，建立可在整个应用程序中使用的基本组件集将非常有帮助。建立后，可以通过自上而下的方式(父容器=>子组件)处理Web应用程序中的页面，方法是为应用程序构建相关的容器，部分和结构，然后将基本组件插入到这些组件中属于。然后，我们从上至下以及从下至上进行工作，以创建一致的体验，加快开发速度并在您的应用程序中建立牢固的界限。

JSX-看起来像HTML，但事实并非如此！ (JSX — looks like HTML, but not that!)

JSX is an XML like syntax that extends ECMAScript and is used in React components to render UI conditionally. It co-exists with JavaScript/React code and is preprocessed by Babel into standard JavaScript objects that a JavaScript engine will parse. Basically, by using JSX you can write concise HTML/XML-like structures (e.g., DOM like tree structures) in the same file as you write JavaScript code, then Babel will transform these expressions into actual JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

JSX是类似于XML的语法，它扩展了ECMAScript，并在React组件中用于有条件地呈现UI。它与JavaScript / React代码共存，并由Babel预处理为JavaScript引擎将解析的标准JavaScript对象。基本上，通过使用JSX，您可以在编写JavaScript代码的同一个文件中编写简洁的类似HTML / XML的结构(例如DOM之类的树结构)，然后Babel会将这些表达式转换为实际JavaScript代码。与过去不同，JSX允许我们将HTML放入JavaScript中，而不是将JavaScript放入HTML中。

JSX might look like an abomination 👽 at first glance but as seen below, minimizes writing code, makes code more comprehensible and most importantly allows the developer to focus more on the component dynamic structure, less on syntactical complexities.

JSX乍一看可能令人讨厌一目了然，但如下所示，可最大程度地减少编写代码，使代码更易于理解，并且最重要的是，允许开发人员将更多的精力放在组件的动态结构上，而不是语法复杂性上。

// JavaScript
const testCode = () => {
return React.createElement("div", null, " ",
              React.createElement("ul", null, " ",
                     React.createElement("li", null, "option 1"), " ",
                            React.createElement("li", null, "option 2")));
};

道具-与组件通信的车辆 (Props — the vehicle that components communicate with)

Appearing as simple as a string — to as complex as an entire component, props are short for properties and are used to pass data between React components. React’s data-flow between components is unidirectional (from parent to child only). React enforces a strict command-chain for props to be inherited from a direct parent only (cannot skip past a generation :D).

props看起来像字符串一样简单-就像整个组件一样复杂， props是属性的缩写，用于在React组件之间传递数据。 React在组件之间的数据流是单向的 (仅从父对象到子对象)。 React强制执行严格的命令链，使道具只能从直接父级继承(不能跳过一代：D)。

When declaring a component, note that props are strictly read-only, and react components must be “pure” i.e. never modify the actual props themselves. It is only through the state that React allows these props to be updated based on user actions/ responses from an integration etc. without violating this pure function rule.

在声明组件时，请注意道具是严格只读的，而react组件必须是“ 纯 ”的，即永远不要修改实际的道具本身。只有通过状态，React才能根据用户操作/来自集成等的响应来更新这些道具，而不会违反此纯函数规则。

Exceptions to the next recommendation are simple applications, where the component hierarchy does not go beyond two — in which case, spreading props is not recommended as it increases memory footprint and CPU usage!

下一个建议的例外是简单的应用程序，在这些应用程序中组件层次结构不会超过两个，在这种情况下，不建议使用扩展道具，因为它会增加内存占用量和CPU使用率！

For large complex applications where the component hierarchies are multiple in count, the most efficient way of declaring props and transferring or passing-them down in a chain is not by enumerating every single one of them in an array — that would be painful to manage but the most efficient workaround is using the spread operator to pass down the whole props object.

对于组件层次结构数量众多的大型复杂应用程序，声明道具并在链中向下传递或传递的最有效方法不是枚举数组中的每个道具，这很麻烦，但是最有效的解决方法是使用传播运算符向下传递整个props对象。

州 (State)

State (the first type) is internally managed by React and is one of the harder topics to grasp. In its simplest definition, it is a JS Object that has data relevant to a specific instance of a single component (where it is initialized).

状态 (第一种类型)是由React内部管理的，是较难理解的主题之一。在最简单的定义中，它是一个JS对象，具有与单个组件的特定实例(在其中进行初始化)有关的数据。

A change in the state happens usually due to a user-input or a response from another service, an event-trigger. Because components render based on the data in this state by subscribing to them when state changes React re-renders part of the DOM that the component renders. In other words, React refreshes the component with the updated state by reacting to this change!

状态更改通常是由于用户输入或其他服务(事件触发)的响应而发生的。因为组件在状态更改时通过订阅来基于该状态下的数据进行渲染，所以React会重新呈现组件渲染的DOM的一部分。换句话说，React通过响应来刷新具有更新状态的组件为了这个改变！

In such use cases where multiple components “react” to the same data change from a common data source — the shared state should be lifted up to the ‘closest common ancestor of the components’

在这样的用例中，多个组件对同一数据的“React”从一个公共数据源发生变化，则共享状态应提升到“ 这些组件的最接近的共同祖先 ”。

As a recap, prop and state play a different role in component development and the differences between them can be summarized as:

回顾一下，道具和状态在组件开发中扮演着不同的角色，它们之间的差异可以总结为：

即将来临➡️ (Coming Next ➡️)

我们希望本文可以简化您学习React的旅程，并为您提供更多有关编程概念迷宫的理解和指导。 (We hope the article could ease your journey of learning React and provide you little more understanding & guidance in the labyrinth of programming concepts.)

If you get the feeling that there is more to ReactJS than the above topics, you are right! Which is why you can be on the lookout for next introductory article — Part II, where we discuss specific use-case to deep-dive into more advanced concepts such as:

如果您觉得ReactJS不仅是上述主题，那是对的！ 这就是为什么您可以关注下一篇介绍性文章-第二部分 ，我们在其中讨论特定的用例以深入研究更高级的概念，例如：

Standard Hooks

标准钩

Styling the Components

样式化组件

Project Documentation

项目文件

Testing the application

测试应用程序

Happy building 💻!

快乐的建筑💻！

词汇表 (Glossary)

ECMAScript 2015 (aka ES6) — Set of specifications that JavaScript engines adopt. JavaScript adopted modern features from ES6 such as arrow functions, array destructuring, classes.

ECMAScript 2015(又名ES6) — JavaScript引擎采用的一组规范。 JavaScript采用了ES6中的现代功能，例如箭头功能，数组解构，类。

Babel — A JavaScript compiler whose main purpose is to convert ECMAScript 2015 code into more vanilla flavored JavaScript for current and older browser environments.

Babel- 一个JavaScript编译器，其主要目的是将 ECMAScript 2015 代码转换为适用于当前和较旧浏览器环境的更原始JavaScript。

Separation Of Concerns — Software development projects are highly successful when they aim at reducing cognitive load from its resources — for example: optimizing data with a database queries and modifying CSS on the end interface are two concerns best addressed separately!

关注点分离– 软件开发项目旨在减少其资源的认知负担时非常成功–例如：最好通过两个数据库查询来优化数据并在最终接口上修改CSS是两个关注点！

Asynchronous Actions — Actions or requests where the state may be updated at a different time than the time when the action was dispatched

异步动作- 可能在与分派动作的时间不同的时间更新状态的动作或请求

Container — React components that are more focused on making things work and majorly concerned with the back-end operations

容器- 更专注于使事情正常运行并且主要与后端操作有关的React组件

JavaScript /JS — A scripting language that is used to design how web page elements behave on an event-occurrence. It can run on both the client-side (through a browser) as well as server-side through Node.js.

JavaScript / JS — 一种脚本语言，用于设计网页元素在事件发生时的行为。 它既可以在客户端(通过浏览器)上运行，也可以通过Node.js在服务器端上运行。

Mounting — Rendering for the first time when React adds nodes to DOM.

挂载- 当React将节点添加到DOM时首次进行渲染。

Stateful logic — Functional code that puts an object (like a component) into a particular “state”. They can be isolated instantiations of the state variable or even any code that uses the state.

有状态逻辑 - 将对象(如组件)置于特定“状态”的功能代码。 它们可以是状态变量的隔离实例，甚至可以是使用该状态的任何代码的隔离实例 。

React Life cycle — Consists of three phases for each component: Mounting, Updating and Unmounting.

React生命周期— 每个组件包括三个阶段：安装，更新和卸载。

Redux — A JavaScript state container that can be used with any UI layer or framework to better manage a large application’s shared state.

Redux — 一个JavaScript状态容器，可以与任何UI层或框架一起使用，以更好地管理大型应用程序的共享状态。

Refs — References or pointers to a piece of data, often used to access a underlying DOM node.

引用-指向数据的引用或指针，通常用于访问底层DOM节点。

Rendering- Any time the render method is triggered and returns a set of instructions to create the DOM.

渲染 - 每次触发render方法并返回一组创建DOM的指令时。

Virtual-DOM — A virtual representation or light-weight copy of real DOM that React creates for improved performance.

虚拟DOM — React为提高性能而创建的真实DOM的虚拟表示或轻量级副本。

致谢和参考 (Acknowledgement and References)

We are extremely grateful to a lot of Medium authors, the ReactJS documentation, and all the passionate developers who have provided a lot of information on this evolving library! Shout outs to each and everyone of them! 👏🏽

我们非常感谢许多中型作者，ReactJS文档以及所有热情的开发人员，他们为这个不断发展的库提供了很多信息！向他们每个人大声喊叫！ 👏🏽

Sincere thanks to all the authors of the articles below who have immensely helped us to appreciate some core-concepts:

衷心感谢以下文章的所有作者，他们极大地帮助我们欣赏了一些核心概念：

Timeline of React: https://medium.com/r?url=https%3A%2F%2Fblog.risingstack.com%2Fthe-history-of-react-js-on-a-timeline%2F

React的时间轴 ： https : //medium.com/r ? url =https% 3A%2F%2Fblog.risingstack.com%2Fthe-history-of-react-js-on-a-timeline%2F

W3Schools: https://www.w3schools.com/react

W3Schools ： https ： //www.w3schools.com/react

Event loops in JS: https://www.youtube.com/watch?v=8aGhZQkoFbQ

JS中的事件循环 ： https : //www.youtube.com/watch?v=8aGhZQkoFbQ

React History: https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/

React历史记录： https : //blog.risingstack.com/the-history-of-react-js-on-a-timeline/

More on Separation of Concerns: https://krasimirtsonev.com/blog/article/react-separation-of-concerns

有关关注点分离的更多信息： https : //krasimirtsonev.com/blog/article/react-separation-of-cercerns

More on JSX: https://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918

有关JSX的更多信息： https ://medium.com/javascript-scene/jsx-looks-like-an-abomination-1c1ec351a918

Official React JSX Explanation: https://reactjs.org/docs/introducing-jsx.html

官方React JSX说明 ： https : //reactjs.org/docs/introducing-jsx.html

Try out converting JSX to JavaScript: https://babeljs.io/

尝试将JSX转换为JavaScript ： https : //babeljs.io/

Good reasons to use React: https://www.stackchief.com/blog/Top%203%20Reasons%20to%20Use%20React

使用React的充分理由： https : //www.stackchief.com/blog/Top%203%20Reasons%20to%20Use%20React

When to use class and functional components in ES6: https://stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components

何时在 ES6中使用类和功能组件 ： https : //stackoverflow.com/questions/36097965/when-to-use-es6-class-based-react-components-vs-functional-es6-react-components

npm intro: https://medium.com/@githmaamarasinghe/the-power-of-npm-275896914123

npm简介 ： https : //medium.com/@githmaamarasinghe/the-power-of-npm-275896914123

React Tutorial with create-react-app: https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc

使用create-react-app React教程： https : //medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc

Thank you JONDAVID EBADIRAD for proof reading and offering feedback— Really grateful !

感谢JONDAVID EBADIRAD进行的校对和提供反馈—非常感谢！