【React 基础一】React 介绍

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 语法

// list -> [1, 2, 3]
<div>
  <div v-for="item in list">
    {{item}}
  </div>
</div>

React 语法

<div>
	{list.map(item => item)}
</div>

在 Vue 中我们通常会使用 Vue 一系列 API 来构建界面（如：v-if、v-for 等）
在 React 中我们则不需要 API 学习，只需使用 JS 基础语法即可便捷快速的构建界面（如上述直接使用数组的 map 方法）
​

​

本篇为 React 系列第 1 篇
​

vx👦:mmm7nnn

公号🐓：醒途

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

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

​