【React 基础一】React 介绍

这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战 ​

React 是一个用于构建用户界面的 JavaScript 库 ​

官方介绍：A JavaScript Library for building user interfaces ​

React - All In JavaScript

以前我们构建用户界面，通常使用的是 HTML + CSS + JS 三板斧 ​

但使用 React 后，这一切都发生了变化 ​

在 React 中最重要的一个概念就是：All In JavaScript ​

即：无论是 Template（模板）、Style（样式）、Logic（逻辑） ，通通都使用 JavaScript 编写 ​

这也是为什么 React 相关的技术岗位最着重考究 JS 基础了，JS 技术过不去，用 React 都没办法出活呀 ​

这也难怪会说 React 就是一个用于构建用户界面的库了，一库在手天下我有了属于是 ​

React - JSX 简介

使用 React 构建用户界面时，我们一定会使用 JSX 语法，这是 React 使用者永远绕不开的一个语法知识 ​

JSX 是 JavaScript 的一种语法拓展（语法糖），它旨在帮助开发者用更舒服的代码构建用户界面 ​

但在代码最终执行时，客户端是不可能认识 JSX 这个怪怪的东西的 ​

因此，在 React 代码执行前，我们总会使用 Babel 把 JSX 语法都转换为 标准的 JavaScript 代码，如此代码就能够顺利的在客户端运行啦 ​

React - JSX 语法之表达式

使用 JSX 书写出的界面代码看起来是 HTML + JS 糅合而成 ​

虽然看起来怪怪的，使用时也感觉怪怪的 ​

但能够随心所欲的使用 JS 辅助 HTML 的组合以及相关操作，对于开发者来讲确实是一种便利 ​

这里举个例子：通过遍历数组展示元素

Vue 语法

React 语法

在 Vue 中我们通常会使用 Vue 一系列 API 来构建界面（如：v-if、v-for 等）

在 React 中我们则不需要 API 学习，只需使用 JS 基础语法即可便捷快速的构建界面（如上述直接使用数组的 map 方法） ​

​

本篇为 React 系列第 1 篇 ​

​

vx👦:mmm7nnn

公号🐓：醒途

邮箱📧：suanzao@wacai.com（欢迎找我内推）

如果喜欢这个系列请给我一个点赞👍或者一个关注➕，诸君的支持是我创作的最大的动力 ​

​