中英文模式阅读
中文模式阅读
英文模式阅读


React是一个用于构建用户界面的JavaScript库。它被Stack Overflow 2017年开发者调查中的"框架，图书馆和其他技术"类别评为最受欢迎。


React是一个JavaScript库，构建在它上面的React应用程序在浏览器中运行，而不是在服务器上运行。这种应用程序仅在必要时与服务器通信，这使得它们与传统网站相比非常快，这些网站迫使用户等待服务器重新呈现整个页面并将其发送到浏览器。


React用于构建用户界面 - 用户在屏幕上看到并与之交互以使用您的Web应用程序。这个界面被分成几个部分，而不是将一个巨大的页面拆分成称为组件的较小部分。更一般地说，这种方法称为模块化。

  • It's declarative: React uses a declarative paradigm that makes it easier to reason about your application.
  • It's efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date.
  • And it's flexible: React works with the libraries and frameworks that you already know.

The Best Tutorials for Learning React {#the-best-tutorials-for-learning-react}


freeCodeCamp有一个React tutorial on YouTube
这将在短短5个小时内教你所有的基础知识。


我们还有更多in-depth intermediate React tutorial
它教你如何使用Firebase构建一个完整的社交媒体React应用程序。这是12个小时，如果你继续，你将学习大量的React错综复杂的知识。

Why learn React? {#why-learn-react}


React涉及Composition，即将许多功能包装到封装容器中的许多组件。


许多流行的网站使用React实现MVC架构模式。 Facebook（部分），Instagram（完全），可汗学院（部分），纽约时报（部分），雅虎邮箱（完全），Dropbox的新照片和视频库应用程序Carousel（完全）是已知使用React的热门网站。


如何使用React构建这些大型应用程序？简单的答案是构建小型应用程序或组件。例：

const Component2 = () => {
  return (
    <div></div>
  );
};
const Component3 = () => {
  return (
    <div></div>
  );
};
const Component1 = () => {
  return (
    <div>
      <Component2 />
      <Component3 />
    </div>
  );
};

ReactDOM.render(
  <Component1 />, 
  document.getElementById("app")
);

在大多数情况下，React是声明性的，这意味着我们更关心的是做什么而不是如何做特定的任务。


声明性编程是一种编程范式，表示计算的逻辑而不描述其控制流。声明性编程具有某些优点，例如减少副作用（当我们修改任何状态或改变某些东西或发出API请求时发生），最小化的可变性（因为很多是抽象的），增强的可读性和更少的错误。


React也有单向数据流。 React中的UI实际上是状态的功能。这意味着，当状态更新时，它也会更新UI。因此，随着状态的变化，我们的用户界

Advantages of React {#advantages-of-react}


使用React的一些原因是：

  1. Fast. Apps made in React can handle complex updates and still feel quick and responsive.
  2. Modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems.
  3. Scalable. Large programs that display a lot of changing data are where React performs best.
  4. Flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore.

Virtual DOM {#virtual-dom}


React的神奇之处在于它对DOM的解释及其创建UI的策略。


React首先使用Virtual DOM虚拟渲染HTML树。然后，每次状态改变并且我们得到一个需要被带到浏览器DOM的新HTML树，而不是编写整个新树，React只会写出新树和前一棵树之间的区别（因为React同时具有这两者）记忆中的树木）。此过程称为树对帐。

Reconciliation {#reconciliation}


React有一个智能差异算法，它只用于在DOM节点中重新生成实际需要重新生成的内容，同时保留其他所有内容。由于React的虚拟DOM，这种差异化过程是可能的。


使用虚拟DOM，React将最后的DOM版本保留在内存中。当它有一个新的DOM版本带到浏览器时，新的DOM版本也将在内存中，因此React可以计算新版本和旧版本之间的差异。


然后，React将指示浏览器仅更新计算的diff而不是整个DOM节点。无论我们多少次重新生成我们的界面，React都会只向浏览器提供新的"部分"更新。

React from Scratch {#react-from-scratch}


您是否想开始学习反应的基础知识而不会陷入创建开发环境的困境？如果您不熟悉Web开发，那么设置开发环境可能会让您在尝试学习React时感到有些恐惧。


在本文中，我们将讨论如何仅使用文本编辑器和浏览器开始使用React，而不是其他任何内容。

1 --- Set Up Boiler Plate Code with Emmet {#1-set-up-boiler-plate-code-with-emmet}


让我们开始第1步。我们将从浏览器中的一个名为"index.html"的文件开始。我们将从锅炉板HTML代码开始。为了快速入门，我建议您使用Emmet和任何文本编辑器。在第一行，输入html:5
然后按shift键获取下面的代码。或者您可以继续复制并粘贴下面的代码。

html:5

这将产生以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

我们可以填写"反应时间！"的标题。


此内容不会显示在您的网页中。 HTML文件的head部分中的任何内容都将是我们的浏览器将用户在body部分中解释我们的代码的元数据。此标题将显示在我们页面的选项卡上，而不是实际显示在页面上。

2 - Get Script Tags to Harness the Power of React and Babel Libraries {#2-get-script-tags-to-harness-the-power-of-react-and-babel-libraries}


好的，第一项已从我们的清单中检查出来。我们来看第二项。我们将通过使用脚本标记来引入React和Babel来设置我们的开发人员环境。


这不是一个真实的开发者环境。那将是一个非常复杂的设置。它还会给我们留下大量的锅炉板代码和库，这些代码和库将使我们不再学习React基础知识。本系列的目标是回顾React的基本语法并直接进入编码。我们打算用<script>
标签引入React库，React DOM库（为什么）和Babel库。

<head>
  ...
  <!-- REACT LIBRARY -->
  <script src="https://unpkg.com/[\[email protected\]](https://www.freecodecamp.org/cdn-cgi/l/email-protection)/dist/react.js"></script>
  <!-- REACT DOM LIBRARY -->
  <script src="https://unpkg.com/[\[email protected\]](https://www.freecodecamp.org/cdn-cgi/l/email-protection)/dist/react-dom.js"></script>
  <!-- BABEL LIBRARY -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
  ...
  <title>Time to React!</title>
</head>

您可以随意使用这些库的更新版本。他们不应该为我们覆盖的内容创建任何重大更改。


我们在这里做什么？ HTML<script>
element用于嵌入或引用可执行脚本。 "src"属性指向React库，ReactDOM库和Babel库的外部脚本文件。


这就像你有一个电动剃须刀。无论电动剃须刀多么花哨，除非你能将它插入墙壁并获得电力，否则对你来说实在没什么好处。如果我们的浏览器无法插入这些库来理解和解释我们的目标，那么我们编写的React代码将对我们没有好处。


这就是我们的应用程序如何获得React的功能，它将是我们如何将React插入Dom。我们将React和ReactDOM作为两个不同的库，因为有一些用例，例如React Native，移动开发不需要渲染到DOM，因此库被拆分，以便人们可以根据他们正在处理的项目来决定他们需要什么。


因为我们需要我们的React来实现它，所以我们将使用这两个脚本。 Babel是我们如何利用ES5之外的ECMA脚本并处理我们将在React中使用的称为JSX（JavaScript as XML）的东西。我们将在接下来的部分深入探讨巴别塔的神奇之处:)


好的，我们已经完成了步骤1和2.我们已经设置了锅炉板代码并设置了我们的开发环境。

3 - Render React to the DOM {#3-render-react-to-the-dom}


我们接下来的两个步骤是在DOM中选择我们想要呈现React内容的位置。我们将在体内的React内容中使用另一个脚本标记。通常，作为关注实践的良好分离，这将在其自己的文件中然后链接到该html文档。我们将在后面的章节中做到这一点。现在，我们将把它留在我们目前所处的html文档的正文中。


现在我们来看看在DOM上选择一个位置来呈现我们的React内容是多么简单。我们会进入体内。最佳实践不仅仅是将React放入要显示的body标签中，而是创建一个单独的元素，通常是div，您可以将其视为插入React内容的根元素。

<body>
  <div id="app">React has not rendered yet</div>
</body>

我们将创建一个简单的<div>
元素并给它一个"app"的id。我们将能够定位此位置以插入我们的React内容，就像使用CSS来定位您选择的样式ID一样。任何反应内容都将在id为app的div标签内呈现。与此同时，我们将留下一些文字说"React还没有呈现"。如果我们在预览页面时看到这一点，则意味着我们错过了渲染React的某个地方。


现在，让我们继续在我们的体内创建一个脚本标记，我们将首次使用React创建它。我们脚本标记需要的语法是添加"type"属性。这指定了脚本的媒体类型。在我们的脑海中，我们使用了一个src属性，该属性指向React库，ReactDOM库和Babel库的外部脚本文件。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  </script>
</body>

我们正在使用的脚本的"类型"将被包装在引号中并设置为"text/babel"
。当我们使用JSX时，我们需要立即使用babel的能力。


首先，我们将把React呈现给DOM。我们将使用ReactDOM.render()
这样做的方法。这将是一种方法，并且记住方法只是附加到对象的函数。此方法将采用两个参数。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  ReactDOM.render(React What, React Where);
</script>
</body>

第一个参数是React的"什么"。第二个参数是您希望将其放置在DOM中的位置"where"。让我们从调用ReactDOM.render（）方法开始。我们的第一个论点是我们的JSX。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  ReactDOM.render(
    <h1>Hello World</h1>, 
    React Where
  );
</script>
</body>

该official react docs state
："这个有趣的标签语法既不是字符串也不是HTML。它被称为JSX，它是JavaScript的语法扩展。我们建议将它与React一起用来描述UI应该是什么样的.JSX可能会提醒你模板语言，但它具有JavaScript的全部功能.JSX生成React"元素"。


很多时候，JSX让那些已经成为开发人员的人感到不安，因为它看起来像HTML。在很小的时候，开发人员被教导分离关注点。 HTML有它的位置，CSS有它的位置，JavaScript有它的位置。 JSX似乎模糊了界限。你正在使用看起来像HTML的东西，但Facebook表示它具有JavaScript的全部功能。


这可能会让退伍军人感到不安，所以很多React教程都是在没有JSX的情况下开始的，这可能非常复杂。我们不会这样做。因为这篇文章是针对那些在职业生涯中非常年轻的人，所以当你看到这种语法时，你可能不会带来这些危险信号。


JSX非常直观。您可以非常轻松地阅读此代码，并看到这将是显示文本"Hello World"的最大标头标记。没有神秘感和相当简单。现在，让我们来看看我们的第二个论点是什么。

<body>
  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello World</h1>, 
      document.getElementById("app")
    );
  </script>
</body>

这就是我们希望将React内容呈现给DOM的地方。你过去可能已经做了很多次了。我们只需输入document.getElementById()
。我们将进入app的id参数。就是这样。我们现在将使用app的id来定位div以插入我们的React内容。


我们希望确保保存我们的内容。继续在浏览器中打开它，你应该看到"Hello World"。正如您可能猜到的，使用React并不是创建Hello World应用程序的最快或最好的方法。我们还没有看到它的好处。但现在，我们知道一切正常。


继续打开控制台，看看"元素"。您可以在Mac上使用命令+ shift + j或在Windows和Linux上执行此操作：Ctrl + Shift + J.


如果单击head标签，我们可以看到我们包含的脚本库。然后我们可以深入到我们的文档正文。让我们点击ID为"app"的div。当我们这样做时，我们会看到我们<h1>
标记内容为"Hello World"。

View Entire Code Here
。

Recap {#recap}


那么让我们快速回顾一下。在我们的head标签中，我们抓住了React，ReactDOM和Babel的脚本标签。这些是我们的浏览器在其元数据中需要的工具，以便特定地阅读我们的React代码和JSX。


然后我们通过创建id为"app"的元素div来定位DOM中我们想要插入React的位置。


接下来，我们创建了一个脚本标记来输入我们的React代码。我们使用了带有两个参数的ReactDOM.render（）方法。 React内容的"内容"，在本例中为我们的JSX，第二个参数是您希望将React内容插入DOM的"where"。在这种情况下，它是id为"app"的位置。


作为JSX的替代品，您可以使用像Babel这样的ES6和Javascript编译器。 https://babeljs.io/

Installing React {#installing-react}

Creating a new React project {#creating-a-new-react-project}


您可以在您的网页中嵌入React库，就像这样^ 2 ^：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script>

聪明的程序员希望采用更实用，更高效的方式：Create React App

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

这将设置您的开发环境，以便您可以使用最新的JavaScript功能，提供良好的开发人员体验，并优化您的应用程序以进行生产。

npm start
将启动一个允许实时重新加载的开发服务器^ 3 ^。


完成项目并准备将应用程序部署到生产环境后，您就可以使用了npm run build
在。中创建应用程序的优化版本build
夹。

Your first React App {#your-first-react-app}

Installation {#installation}


如上一节（安装）中所述，运行Create React App
工具。一切都完成后，cd
进入您的应用程序的文件夹并运行npm start
。这将启动一个开发服务器，你就可以开始开发你的应用了！

npm install -g react-create-app
create-react-app my-first-app

cd my-first-app
npm start

Editing the code {#editing-the-code}


启动您的编辑器或IDE选择并编辑App.js
文件中src
夹。用the创建时react-create-app
工具，这个文件中已经有一些代码了。


代码将包含以下部分：

imports {#imports}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

这是用来的webpack
导入所有必需的模块，以便您的代码可以使用它们。此代码导入3个模块：

  1. React and Component, which allow us to use React as it should be used. (With components)
  2. logo, which allows us to use logo.svg in this file.
  3. ./App.css, which imports the stylesheet for this file.

classes/components {#classes-components}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

React是一个使用Components的库，它允许您将UI拆分为独立的，可重用的部分，并独立思考每个部分。已经创建了1个组件App
零件。如果你用过create-react-app
工具，这个组件是项目的主要组件，你应该围绕这个中心类构建。


我们稍后将更详细地介绍组件。

exports {#exports}


在React中创建一个类时，你应该在声明后导出它们，这允许你使用它在另一个文件中使用该组件import
关键词。您可以使用default
之后export
关键字告诉React这是这个文件的主类。

export default App;

View the results! {#view-the-results-}


当您通过发出启动开发服务器时npm start
命令，您可以在浏览器中查看添加到项目中的更改。发出命令后，npm应该打开一个自动显示你的应用程序的浏览器。

React - Components {#react-components}


组件可以在React中重用。你可以为道具注入价值，如下所示：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Faisal Arkan" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

name="Faisal Arkan"
会给予价值{props.name}
来自function Welcome(props)
并将返回已给出值的组件name="Faisal Arkan"
。之后，反应将元素转换为HTML。

Other ways to declare components {#other-ways-to-declare-components}


使用React时，有很多方法可以声明组件。有两种组件， stateless
组件和 stateful
组件。

Stateful {#stateful}

Class Type Components {#class-type-components}

class Cat extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      humor: 'happy'
    }
  }
  render() {
    return(
      <div>
        <h1>{this.props.name}</h1>
        <p>
          {this.props.color}
        </p>
      </div>
    );
  }
}

Stateless Components {#stateless-components}

Functional Components (Arrow Function from ES6) {#functional-components-arrow-function-from-es6-}

const Cat = props => {
  return (  
    <div>
      <h1>{props.name}</h1>
      <p>{props.color}</p>
    </div>;
  );
};

Implicit Return Components {#implicit-return-components}

const Cat = props => 
  <div>
    <h1>{props.name}</h1>
    <p>{props.color}</p>
  </div>;

中英文模式阅读
中文模式阅读
英文模式阅读

查看英文原文

查看更多文章


公众号：银河系1号


联系邮箱：public@space-explore.com


（未经同意，请勿转载）