React 初学者的 10 个 JavaScript 概念

React是一个 JavaScript 前端库，如果你想入门，React你必须先学习JavaScript，这门编程语言是 React 的核心React。ReactJavascript本身就是一种庞大的语言，在学习 React 之前，你不可能掌握所有 JavaScript 知识。不过不用担心，本文将为Javascript你讲解在学习 React 之前必须掌握的 10 个概念React。

Thanks for reading!App Generator提供的内容

👉-What is Javascript简短信息
👉Introduction to React
👉 #1 -Variables
👉 #2 -Functions Definition
👉 #3 -Classes and the Extend keyword
👉 #4 -Async/Await
👉 #5 -Array methods
👉 #6 -Ternary Operator
👉 #7 -Template Literal
👉 #8 -Destructuring
👉 #9 -Spread Operator
👉 #10 -Import and Export
👉Hello World在React中编写代码

✨ 什么是 JavaScript

JavaScript 是一种用于网页的高级脚本语言。它由 Brendan Eich 于 1995 年发明。最初，JavaScript 的作用是使网页具有交互性。但后来，开发人员构建了框架和库，使 JavaScript 几乎可以在所有平台上使用。

例如，您可以使用 react native 构建移动应用程序，使用 electron 构建桌面应用程序，使用 node.js 构建后端，使用 react.js 构建前端等。

这些只是我提到的 JavaScript 能够做的几件事。如果我说出 JavaScript 能够做的所有事情，那么它本身就需要一篇文章了。

话虽如此，让我们继续看看什么是 React。

✨什么是 React

React.js是一个由 Facebook 创建和维护的开源 JavaScript 前端库。它是一个基于组件的库，这意味着 React 会将大型应用程序分解成更小的部分，这些部分被称为组件。这种方法使大型项目的构建和管理更加轻松。

如果您是第一次接触 React，请注意，React 是一个库，而不是像 Angular.js 那样的框架，这意味着它不是一个完整的解决方案。使用 React 构建应用时，您需要使用外部库来实现路由、HTTP 请求和状态管理等功能。

这是对 React 的简短介绍。如果您想了解更多，我会在文章末尾放一些免费资源。去看看吧。

定义已经足够了，现在，让我们了解一下在学习 React 之前需要学习的 JavaScript 概念。

✨ #1 - 变量

在开始使用 React 之前，你必须了解如何在 JavaScript 中声明变量。JavaScript 中声明变量的方式有三种：var、let 或 const。它们各有优缺点。

var foo = "hello world!";
let bar = "Hey, There!";
const baz = "What's up?";

这三者之间有一个细微的差别。由于“var”类型会使变量在全局范围内可见，因此建议使用“let”或“const”。

要了解有关每个定义的更多信息，请随时访问涵盖深入差异的完整教程：

https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/

✨ #2 - 函数定义

React 的基本原则是将大型项目分解成更小的组件。这些组件要么是函数，要么是类。

因此，了解如何用 JavaScript 声明函数非常重要。与变量一样，声明函数的方法不止两种，但以下两种是最重要的：

Function declaration
Arrow Function

让我们看看每个例子。

函数声明


// function declaration
function add(num1, num2) {
  return num1 + num2;
}

add(2, 2) // 4

这就是您在纯 Javascript 中声明和调用函数的方式。

现在你已经知道如何用 JavaScript 声明一个简单的函数，让我们看看如何在 React.js 中使用它。在 React 中，函数用于创建函数式组件。

function App() {
  return (
    <div className='App'>
      <h1>Hello world!</h1>
    </div>
  );
}

这就是 React 中函数声明的用法。如你所见，组件不返回任何值，它返回的是决定应用程序外观的 HTML。

箭头函数

// Arrow function
const subscract = (num1, num2) => {
  return num1 - num2;
}

subscract(5, 2) // 3

箭头函数比函数声明更简洁一些。两者之间没有太大区别。函数组件示例：

const App = () => {
  return (
    <div className='App'>
      <h1>Hello world!</h1>
    </div>
  );
}

和箭头函数一样，箭头函数组件比函数声明更简洁一些，看起来更美观、更直观。

✨ #3 - 类和 Extend 关键字

正如我之前所说，React 有类组件和函数组件。函数组件由函数构建，而类组件由类构建。

让我们看一下 javascript 类的示例，然后我们将查看 react 类组件。

// javascript class
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}; 

const square = new Rectangle(10, 10);

console.log(square.height); // output: "10"

Javascript 类只是用于创建对象的模板。使用 new 关键字，您可以从类中创建一个新对象。您还可以使用 extends 关键字从类中创建一个新对象。

Class 组件示例：

class App extends Component {
  render() {
    return (
      <div>App</div>
    )
  }
}

这里我们通过扩展组件类创建了一个类组件。它只是返回 HTML/JSX 的 javascript 类。

✨ #4 - Async/Await

Async-await 是一个非常重要的 javascript 概念。但在深入研究它们之前，您首先需要了解异步 javascript。

异步 JavaScript

在构建 Web 应用程序时，您需要进行 API 调用以从后端获取数据，并且这些获取操作可能需要一段时间才能完成。

在获取数据时，所有其他功能都会冻结。为了防止这种情况，JavaScript 引入了异步函数。这意味着异步函数可以帮助您编写代码，使其能够同时从 API 获取数据，而不会阻塞应用程序的其余部分。

这是异步 javascript。

有几种处理异步代码的方法，但我将讨论 async/await。因为它是目前处理异步代码的最佳方法。

让我们从一个例子开始：

async function getPersonsInfo(name) {
  const people = await server.getPeople();
  const person = people.find(person => { return person.name === name });
  return person;
}

异步：

async 关键字声明此函数是一个异步函数。异步函数自动返回一个承诺。async 关键字可用于所有类型的函数。例如箭头函数、回调函数或函数表达式。

等待：

await 关键字的作用是指示异步函数等待操作完成。它与 Promise 的 .then() 代码块相同，只是更加简洁。

这里需要注意的是，您只能在异步函数中使用 await 关键字，否则会出现错误。

处理错误

如您所见，await 关键字等待承诺解决并返回结果。我们需要记住，我们的承诺可能会被拒绝。所以，现在我们需要一种方法来处理这个问题。

我们可以通过两种方式处理异步函数中的错误。

解决方案＃1-使用try ... catch()块：

asyncFunctionCall().catch(error => {
  console.error(error)
});

解决方案＃2 - 使用内部try ... catch()块：

async function getPersonsInfo(name) {
  try {
    const people = await server.getPeople();
    const person = people.find(person => { return person.name === name });
    console.log(person)
  } catch (error) {
    console.error(error)
  }
}

React 中的 Async/await

const App = () => {

 useEffect(() => {
  // declare the data fetching function
  const fetchData = async () => {
    //get the data
    const data = await fetch('<https://yourapi.com>');
  }

  // call the function
  fetchData()
  // make sure to catch any error
    .catch(console.error);
    }, [])

  return <>...</>;
};

✨ #5 - 数组方法

数组方法是 JavaScript 中操作数组的方法。了解这些方法的工作原理在未来会很有用。因为当你开始使用 React 构建项目时，你会经常用到它们。

数组.map()

array.map()通过对数组的每个元素应用回调函数来创建一个新数组。此外，它不会改变原始数组。

代码示例

const numbers = [2, 3, 4, 6];
const newArr = numbers.map(myFunction)

function myFunction(num) {
  return num * 2;
} 

console.log(numbers); //2,3,4,6
console.log(newArr); //4,6,8,12

数组.filter()

array.filter()循环遍历数组的所有元素，并在回调函数中筛选出符合条件的元素。就像map方法一样，它不会改变旧数组。

代码示例

const ages = [32, 33, 16, 40];
const result = ages.filter(checkAdult);

function checkAdult(age) {
  return age >= 18;
}

console.log(ages);
console.log(result);

React 中的示例map()

function App() {
  const names = ['sam', 'jack', 'tom', 'dave'];

  return (
    <div className='App'>
      <h1>Hello world!</h1>
      {
        names.map(name => <h2>hello {name}</h2>)
      }
    </div>
  );
}

上面的示例使用渲染了 names 数组的所有元素map。这非常有用，很可能你会经常用到它。

React 中的示例filter()

const numbers = [1, 2, 3, 4, 5, 6, 7];
const lessThanFive = numbers.filter(num => num < 5);

console.log(lessThanFive); //1,2,3,4
console.log(numbers) //1, 2, 3, 4, 5, 6, 7

这里我将数字数组过滤到小于 5 的数值。这种方法对于创建过滤功能也非常重要。

✨ #6 - 三元运算符

三元运算符是 if/else 条件语句的简化形式。本质上，它只是 if-else 条件语句的另一种写法。

代码示例- 经典If/else

//if/else
if (loading) {
  loadingComponent();
} else {
  App();
}

代码示例- 三元运算符

loading ? loadingComponent() : App();

React 示例- 三元运算符

class App extends Component {
  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
      </div>
    );
  }
}

✨ #7 - 模板字面量

如果你正在构建一个 Web 应用，那么处理字符串是很正常的。在早期版本的 JavaScript（ES5）中，如果要将字符串连接（添加）到变量，你必须使用 + 运算符。这看起来不太美观，也不容易理解。

但现在你可以使用 ES6 模板字面量。模板字面量使用 ${} 符号将字符串与变量连接起来。

代码示例

const name = "Sam";
const greeting = `Hello, ${name}!`
console.log(greeting) // Hello, Sam!

✨ #8 - 解构

解构是一种将对象或数组中的值提取到变量中的方法。

在早期版本的 Javascript（ES5）中，如果要从数组或对象中提取值，可以执行以下操作：

//Array
const foo = ['one', 'two'];
const one = foo[0]

const bar = ["Tom", "Jerry"];
const tom = bar[0]

现在，您可以使用 ES6（现代版本的 Javascript）重构来执行以下操作：

const foo = ['one', 'two'];
const [one] = foo;

//Object
const bar = ["Tom", "Jerry"];
const {tom} = bar

它会将值 1 赋给变量 1。这更加简洁直观。

React.js 中的示例

React 使用 props 向组件传递数据。Props 就像普通函数中的参数一样。

这里的重点是 props 是对象。例如，如果你有一个名为的组件Greeting，它需要一个 prop 名称：

<Greeting name={"Sam"} />

If you want to access it, you need to write props.name.
function Greeting(props) {
  return (
    <div>hello {props.name}</div>
  )
}

但您也可以使用如下重组：

function Greeting(props) {
  const {name} = props
  return (
    <div>hello {name}</div>
  )
}

现在您无需调用即可使用该名称props.name。

✨ #9 - 扩展运算符

扩展运算符用于复制数组或对象的全部或部分。

扩展运算符用于创建数组或对象的精确副本。当处理反应状态时，它非常方便，因为状态是不可变的。

const arrayOne = [1, 2, 3];
const arrayTwo = [4, 5, 6];
const arrayThree = [...arrayOne, ...arrayTwo];

✨ #10-进出口

如前所述，React 是一个基于组件的 UI 框架。因此，要构建一个完整的应用程序，你需要使用你构建的组件。

要使用组件，您需要将它们导入到您想要使用的文件中。您可以使用导出和导入来在您的应用程序中使用组件。

导出样本

// app.js file - Exports the “App” object
function App() {
  return (
    <div>App</div>
  )
}

导入样本

// index.js - Use the “App” object via an “import”
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

在简要介绍我们可以在 React 中使用的 10 个有用的 JS 概念之后，好奇的人可能会进一步Hello World在 React 中编写一个简单的代码。

✨`Hello World`使用 React 编写项目

本节介绍如何使用 React 和 Javascript 编写经典的“Hello World”项目。

步骤＃1：安装工具

要开始使用 React，首先需要安装 Node.js。你可以从这里下载 Node。

步骤#2：构建应用程序

安装 NodeJS 后，打开终端/命令行并使用以下命令创建项目文件夹：

$ mkdir hello-react

CRA然后使用（create-react-app工具）生成一个基本的React项目。

$ npx create-react-app my-app
$ cd my-app
$ npm start

运行所有这些命令后，您的浏览器将在端口上打开 React 项目3000。

import React from 'react'

function App() {
  return (
    <div></div>
  )
}

export default App

并在里面写一个h1标签。Hello world!div

import React from 'react'

function App() {
  return (
    <div>
    <h1>hello world!</h1>
    </div>
  )
}

export default App

此时，您应该Hello World在浏览器中看到消息。

恭喜！从现在开始you are a React (beginner) developer。

✨ 结论

如果您在不了解Javascript 基本概念的情况下开始学习/使用 React，那么您可能会效率低下并且无法充分利用React的全部功能。

Thanks for reading!如需更多资源，欢迎访问：

✨ 更多使用 Django、Flask 和React制作的免费仪表板
✨ 更多管理仪表板- 包含大量产品的索引

文章来源：https://dev.to/sm0ke/10-javascript-concepts-for-react-beginners-4j6n

React 初学者的 10 个 JavaScript 概念

React 初学者的 10 个 JavaScript 概念

✨ 什么是 JavaScript

✨什么是 React

✨ #1 - 变量

✨ #2 - 函数定义

✨ #3 - 类和 Extend 关键字

✨ #4 - Async/Await

✨ #5 - 数组方法

✨ #6 - 三元运算符

✨ #7 - 模板字面量

✨ #8 - 解构

✨ #9 - 扩展运算符

✨ #10-进出口

✨Hello World使用 React 编写项目

✨ 结论

✨`Hello World`使用 React 编写项目