什么是React？ (What is React?)

React.js often referred to as React or ReactJS is a JavaScript library responsible for building a hierarchy of UI components or in other words, React.js is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps(React Native). React also allows us to create reusable UI components. React was first created by Jordan Walke, a software engineer working for Facebook.

React.js通常被称为React或ReactJS是一个JavaScript库，负责构建UI组件的层次结构，换句话说，React.js用于构建专门用于单页面应用程序的用户界面。 它用于处理Web和移动应用程序的视图层(React Native)。 React还允许我们创建可重用的UI组件。 React最初是由Facebook的软件工程师Jordan Walke创建的。

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. There are also Javascript frameworks such as Angular, Vue, Nodejs, Ember.js, Blackbone.js and etc…

React允许开发人员创建可以更改数据的大型Web应用程序，而无需重新加载页面。 React的主要目的是快速，可扩展和简单。 还有Javascript框架，例如Angular ， Vue，Nodejs，Ember.js，Blackbone.js等。

Also, I want to talk about Components. What are the Components?

另外，我想谈谈组件。 有哪些成分 ？

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

组件是任何React应用程序的构建块，典型的React应用程序将具有许多这样的组件。 简而言之，组件是一个JavaScript类或函数，可以选择性地接受输入，即properties(props)并返回一个React元素，该元素描述应如何显示UI(用户界面)的一部分。

In the below image consist of some components, for example FindFriendsComponent, FindFriendsListComponent, ButtonComponent.

在下图中，这些组件由一些组件组成，例如FindFriendsComponent，FindFriendsListComponent和ButtonComponent 。

Your first component

您的第一个组件

const Greeting = () => <h1>Hello World!</h1>;

This is a functional component (called Greeting) written using ES6’s arrow function syntax that takes no props and returns an H1 tag with the text “Hello World today!”

这是使用ES6的箭头函数语法编写的功能组件 (称为Greeting)，该组件不需要任何道具，并返回带有文本“ Hello World today！”的H1标签。

Components come in two types, Class components and Function components.

组件有两种类型， 类组件和功能组件。

Functional (Stateless) Component

功能(无状态)组件

These components are purely presentational and are simply represented by a function that optionally takes props and returns a React element to be rendered to the page.

这些组件纯粹是表示性的，并简单地由一个函数表示，该函数可以选择使用props并将返回的React元素返回到页面。

Generally, it is preferred to use functional components whenever possible because of their predictability and conciseness. Since, they are purely presentational, their output is always the same given the same props.

通常，由于功能组件的可预测性和简洁性，因此最好尽可能使用功能组件。 由于它们纯粹是呈现性的，因此给定相同的道具，其输出总是相同的。

You may find functional components referred to as stateless, dumb or presentational in other literature. All these names are derived from the simple nature that functional components take on.

在其他文献中，您可能会发现功能组件被称为无状态 ， 哑或表示形式 。 所有这些名称均源自功能组件所具有的简单性质。

==> Functional because they are basically functions

==> 功能性的，因为它们基本上是功能性的

==> Stateless because they do not hold and/or manage state

==> 无状态，因为它们不持有和/或管理状态

==> Presentational because all they do is output UI elements

==> 演示性的，因为它们所做的只是输出UI元素

A functional component in it’s simplest form looks something like this:

最简单形式的功能组件如下所示：

const Greeting = () => <h1>Hi, I’m Functional component!</h1>;

Class (Stateful) Component

类(有状态)组件

These components are created using ES6’s class syntax. They have some additional features such as the ability to contain logic (for example methods that handle onClick events), local state and other capabilities.

这些组件是使用ES6的类语法创建的。 它们具有一些其他功能，例如包含逻辑的能力(例如，处理onClick事件的方法)，本地状态和其他功能。

As you explore other resources, you might find class components referred to as smart, container or stateful components.

当您探索其他资源时，您可能会发现称为smart ， container或有状态组件的类组件。

==> Class because they are basically classes

==> 类，因为它们基本上是类

==> Smart because they can contain logic

==> 聪明，因为它们可以包含逻辑

==> Stateful because they can hold and/or manage local state

==> 有状态的，因为他们可以持有和/或管理本地状态

A class component in its simplest form:

最简单形式的类组件：

class Greeting extends React.Component {render(){return <h1>Hi, I’m a Class component!</h1>;  }}

How do I choose which component type to use?

如何选择要使用的组件类型？

Use a class component if you:

如果满足以下条件，请使用类组件：

==> need to manage local state

==>需要管理本地状态

==> need to add lifecycle methods to your component

==>需要向组件添加生命周期方法

==> need to add logic for event handlers

==>需要为事件处理程序添加逻辑

Otherwise, always use a functional component.

否则，请始终使用功能组件。

In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:

除了提供可重用的React库代码(节省开发时间并减少编码错误的机会)之外，React还具有两个关键特性，这些特性对JavaScript开发人员更具吸引力：

-JSX

-JSX

-Virtual DOM

-虚拟DOM

Firstly, let’s talk about JSX. What is JSX?

首先，让我们谈谈JSX。 什么是JSX？

What is JSX?

什么是JSX？

JSX (short for JavaScript eXtension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And — since React JS browser support extends to all modern web browsers — JSX is compatible with any browser platform you might be working with. You are not required to use JSX, but JSX makes it easier to write React applications.

JSX(JavaScript eXtension的缩写)是一种React扩展，使Web开发人员可以使用简单HTML样式的代码轻松修改其DOM。 并且-由于React JS浏览器支持已扩展到所有现代Web浏览器-JSX与您可能使用的任何浏览器平台兼容。 您不需要使用JSX，但是JSX使编写React应用程序变得更加容易。

Let us demonstrate with two examples, the first uses JSX and the second does not:

让我们通过两个示例进行演示，第一个示例使用JSX，第二个示例不使用：

Example 1->JSX:

示例1-> JSX：

const myelement = <h1>JSX is very good!</h1>;ReactDOM.render(myelement, document.getElementById('root'));

Example 2->Without JSX:

示例2->没有JSX：

const myelement = React.createElement('h1', {}, 'I do not use JSX!');ReactDOM.render(myelement, document.getElementById('root'));

As you can see in the first example, JSX allows us to write HTML directly within the JavaScript code.So,we can say JSX is easily and understanding than without JSX.

在第一个示例中可以看到，JSX允许我们直接在JavaScript代码中编写HTML。因此，可以说，与没有JSX相比，JSX更容易理解。

Another Example: JSX:

另一个示例：JSX：

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Secondly, let’s talk about Virtual DOM.

其次，让我们谈谈虚拟DOM。

What is Virtual DOM?

什么是虚拟DOM？

If you’re not using React JS (and JSX), your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem (since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh).

如果您不使用React JS(和JSX)，则您的网站将使用HTML更新其DOM(该过程使事情在屏幕上“发生变化”，而无需用户手动刷新页面)。 这对于简单的静态网站来说效果很好，但是对于涉及大量用户交互的动态网站来说，这可能会成为一个问题(因为每次用户单击要求刷新页面的功能时，整个DOM都需要重新加载)。

However, if a developer uses JSX to manipulate and update its DOM, React JS creates something called a Virtual DOM. The Virtual DOM (like the name implies) is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens (like a user clicking a button).

但是，如果开发人员使用JSX来操纵和更新其DOM，则React JS会创建一个称为虚拟DOM的东西。 虚拟DOM(如名称所示)是站点DOM的副本，React JS使用该副本来查看事件发生时(例如用户单击按钮)需要更改实际 DOM的哪些部分。

Which companies use React?

哪些公司使用React？

There are many big companies which use React, for instance Facebok, İnstagram, Netflix, Pinterest, Uber, Udemy, Shopify and etc……

有许多使用React的大公司，例如Facebok，İnstagram，Netflix，Pinterest，Uber，Udemy，Shopify等……

为什么要使用React？ (Why to use React?)

Now, the main question arises in front of us is why one should use React. There are so many open-source platforms for making the front-end web application development easier, like Angular. Let us take a quick look on the benefits of React over other competitive technologies or frameworks.

现在，摆在我们面前的主要问题是为什么要使用React。 像Angular一样，有许多开源平台可简化前端Web应用程序的开发。 让我们快速了解一下React与其他竞争技术或框架相比的优势。

1. Easy to learn

   简单易学

Anyone with a basic previous knowledge in programming can easily understand than other framework or libraries. To react, you just need basic knowledge of CSS and HTML.

任何具有编程方面基础知识的人都可以比其他框架或库更容易理解。 要做出React，您只需要CSS和HTML的基本知识。

2. Simplicity

2.简单性

React is easy for developer because when you use JSX.I have talked about JSX above.

React对于开发人员来说很容易，因为当您使用JSX时，我已经在上面谈到了JSX。

3. Performance

3.表现

React does not offer any concept of a built-in container for dependency. You can use Browserify, Require JS, EcmaScript 6 modules which we can use via Babel, ReactJS-di to inject dependencies automatically.

React没有为依赖提供任何内置容器的概念。 您可以使用Browserify，Require JS，EcmaScript 6模块，我们可以通过Babel，ReactJS-di使用这些模块来自动注入依赖项。

4. Testability

4.可测性

ReactJS applications are super easy to test. React views can be treated as functions of the state, so we can manipulate with the state we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc.

ReactJS应用程序非常易于测试。 React视图可以被视为状态的函数，因此我们可以使用传递给ReactJS视图的状态进行操作，并查看输出和触发的动作，事件，函数等。

什么时候使用React？ (When to use React?)

React excels because it’s pure JavaScript. If you have a team of JavaScript developers that know the ins and outs of the language, then it’s a great fit.

React是出色的，因为它是纯JavaScript。 如果您有一个由JavaScript开发人员组成的团队，他们了解这种语言的来龙去脉，那么它非常适合。

JavaScript developers will be able to:

JavaScript开发人员将能够：

• Embrace JS拥抱JS
• Build components with pure JavaScript使用纯JavaScript构建组件
• Understand styling with CSS-in-JS了解CSS-in-JS中的样式

Where else should you use Reactjs?

您还应该在其他地方使用Reactjs？

Of course, we can’t cover each-and-every use-case of Reactjs in a single article. The list is endless, but here’s a taste of some example web apps where you can use Reactjs:

当然，我们不能在一篇文章中介绍Reactjs的每个用例。 列表是无止境的，但是下面是一些示例Web应用程序的示例，您可以在其中使用Reactjs：

• Blogs (Gatsby)博客(盖茨比)
• Business websites商业网站
• Portfolios作品集
• Forums论坛
• Rating websites评级网站
• Membership sites会员网站
• eLearning modules电子学习模块
• Galleries画廊
• Personal websites for self-promotion个人网站自我推广
• Job boards工作委员会
• Business directories业务目录
• Q&A websites like QuoraQ＆A等Quora网站
• Non-profit websites for collecting donations非营利网站收集捐款
• Wikis and knowledge basesWiki和知识库
• Media-centric sites like YouTubeYouTube等以媒体为中心的网站
• Auction and coupon sites拍卖和优惠券网站

Conclusion

结论

Reactjs is an excellent addition to the projects that need component reusability, impressive user interactions, or crazy animations. That said, it’s a robust UI library to build projects that cater to small, medium, and even large-scale organizations. That’s why so many companies rely heavily on React for their long-term business goals.

Reactjs是需要组件可重用性，令人印象深刻的用户交互或疯狂动画的项目的绝佳补充。 就是说，它是一个健壮的UI库，用于构建满足小型，中型甚至大型组织的项目。 这就是为什么这么多公司严重依赖React实现其长期业务目标的原因。

Hope you have enjoyed this article. In the next article, I will discuss the differences between React JS, Angular and Vue and will analyze which one is better and why.

希望您喜欢这篇文章。 在下一篇文章中，我将讨论React JS，Angular和Vue之间的区别，并分析哪个更好以及为什么。

Thanks to Everyone.

谢谢大家。