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(欢迎找我内推)
如果喜欢这个系列请给我一个点赞👍或者一个关注➕,诸君的支持是我创作的最大的动力