ReactJS入门指南—注释第1部分小小书 XXshu

这是我关于egghead.io的ReactJS初学者指南的第一部分。我的小组成员决定将React包含在我们的技术堆栈中，因此我试图快速学习React基础知识。

React是一个通过方法创建HTML和CSS的框架。

下面的代码片段使用普通的JavaScript创建HTML和CSS：

   
 //使div 
   
  const rootElement = document.getElementById（'root'） 
  const element = document.createElement（'div'）//创建另一个div 
  element.textContent ='Hello World'//将html转换为div 
  element.className ='container'//将类添加到div 
  rootElement.appendChild（element）//将新div嵌套在ID为“ root”的div中

首先，我们使用HTML创建一个id为“ root”的div。然后，我们用JavaScript编写一个分配了div的常量（ES6语法）。接下来，我们使用JavaScript制作另一个div，给它一个文本“ Hello World”，并给它一个类名“ container”。然后，将新的div嵌套在带有“ root” ID的div中。

以下代码在React中实现了相同的目的：

   
 
  <script crossorigin src =“ 
  https://unpkg.com/react@16/umd/react.production.min.js“>  
  <script crossorigin src =“ 
  https://unpkg.com/react-dom@16/umd/react-dom.production.min.js“>  
   
  const rootElement = document.getElementById（'root'） 
  // const element = document.createElement（'div'） 
  // element.textContent ='Hello World' 
  // element.className ='容器' 
  // rootElement.appendChild（element） 
  const element = React.createElement（//使用`createElement`方法创建另一个div 
  'div'， 
  {className：“容器”}， 
  '你好，世界' 
  ）//第一个参数是元素，第二个参数是属性，最后一个是子元素 
  ReactDOM.render（element，rootElement）//与添加类似，将元素呈现为rootElement

第一个代码段中注释掉的代码在功能上被React取代。首先，我们使用createElement() 方法创建一个常量，该常量带有三个参数：HTML元素，属性和该元素的子元素。 如果需要，我们可以添加更多的孩子。最后，我们有一个render() 方法，将 element 渲染为rootElement 。

当我们运行console.log(element);时会发生什么？？

需要注意的重要事项是props对象。它包含属性children和className ，此处与内部HTML和CSS类名相对应。

如果最后一个参数有多个参数，则将有一个child数组。

  const element = React.createElement（//使用`createElement`方法创建另一个div 
  'div'， 
  {className：“容器”}， 
  '你好，世界'， 
  '世界再见

如果我们编写数组，输出将是相同的。

  const element = React.createElement（ 
  'div'， 
  {className：“容器”， 
 孩子们：['Hello World'，'Goodbye World'] 
  }）

儿童的第三个参数是为了方便起见。

尽管可以仅使用React.createElement()编写应用程序，但效率不高。为了解决这个问题，创建了JSX。 JSX是类似于HTML的自定义标记语言。它旨在为代码作者提供熟悉性和可读性。

让我们用JSX重写之前的代码。

   
 
  <script crossorigin src =“ 
  https://unpkg.com/react@16/umd/react.production.min.js“>  
  <script crossorigin src =“ 
  https://unpkg.com/react-dom@16/umd/react-dom.production.min.js“>  
   
  const rootElement = document.getElementById（'root'） 
  // const element = React.createElement（ 
  //'div'， 
  // {className：'container'}， 
  // '你好，世界' 
  //） 
  const element =  Hello World 
 // JSX！ 
  ReactDOM.render（element，rootElement）

如果运行此命令， SyntaxError在控制台中收到SyntaxError 。这是因为script标记中的JSX行需要是JavaScript。我们需要将JSX转换为React.createElement()调用。 JavaScript编译器Babel可以做到这一点。

我们在React CDN之后添加Babel独立CDN，并将脚本类型更改为text/babel 。

请注意，尽管JSX中的HTML与HTML有一些相似之处，但class属性是className而不是HTML的class 。

您可以通过使用字符串插值将JavaScript与JSX结合使用。字符串插值是如何在字符串中显示变量。例如，如果您想将HTML“ Hello World”设为外部变量，则可以执行以下操作：

  const content ='Hello World' 
  const element =  {content}

每当使用花括号{}您就不再使用JSX，而是使用JavaScript。只要是表达式，任何JavaScript都是有效的。这是将逻辑作为标记的一部分的有效方法。

通常使用插值和散布运算符...来创建道具对象。例如：

  const props = { 
  className：'容器'， 
 孩子们：“ Hello World” 
  } 
  const元素=（ 
   
  ）

我们先创建一个props对象，然后使用{...props}将其自动封闭在React元素中。这类似于JavaScript中的对象传播。在这里，我们在div中散布了className和child。

结果是一样的。 Hello World将显示在浏览器上。

如果需要覆盖props对象中的属性，则可以将JSX属性放在{...props}插值之后，或者放在div标签之间（如果它是HTML文本）。

例如： const element =


This also displays.

简而言之，您可以使用克拉号<启动JSX。您可以指定要渲染的元素，例如div 。您添加了HTML元素等道具，但请记住语法略有不同。您添加子项，然后关闭element标签。