关于react.js:React1初识React框架

1次阅读

共计 2425 个字符，预计需要花费 7 分钟才能阅读完成。

React 框架在古代前端开发的我的项目中越来越罕用，该框架的语法结构也深深的影响着其余框架在设计时的思路和理念。本专栏从这篇文章开始，以零根底登程，一步步总结和解说 React 框架的应用。

首先咱们先来将 React 工作环境搭建起来。要想让 React 工作起来，须要用到下列三个库：

react.development.js：React 外围库。
react-dom.development.js：React 操作 DOM 的库。
babel.min.js：将 JSX 语法转换为 JavaScript 语法的库。

上述三个库大家能够去 React 的官网进行下载。除此之外，咱们还须要创立一个用于书写 React 代码的 js 文件，能够命名为 index.js。

接下来咱们要将上述 js 文件依照程序一个个的加载到 HTML 文档中。因为本文临时应用非工程化的办法运行 React 我的项目，所以临时须要手动将 js 文件加载到 HTML 文档中。

HTML 文档的代码如下所示。

<html>
  <head>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
    <script type="text/babel" src="js/index.js"></script>
  </head>
  <body></body>
</html>

上述代码须要留神以下两点：

留神 1：独立的 index.js 文件须要在加载时将 script 标记对的 type 属性取值为“text/babel”，而不是“text/javascript”。

留神 2：这样的形式运行 React 我的项目，须要借助 WebStorm 或 VS Code 这样的编辑器，在编辑器自带的内置服务器的帮忙下能力失常启动我的项目。

搭建好了 React 工作环境，咱们来实现第一个 React 程序，即在浏览器的页面中显示一个一级题目，题目内容为“Hello,React!”

1、首先，在 HTML 文档中设置一个 div 标记对作为 React 我的项目中 DOM 元素的总容器。会应用 Vue.js 的同学能够将这个 div 了解为“挂载点”。同时还要为这个 div 标记对设置一个 id 属性或 class 属性，以保障在 index.js 文件中能够不便的援用该节点。

<body>
  <div id=“app”></div>
</body>

2、其次，在 index.js 文件中输出下列代码：

ReactDOM.render(
  <h1>Hello,React!</h1>,
  document.querySelector("#app")
)

ReactDOM.rander()办法是 React 的外围办法，该办法的格局如下所示。

ReactDOM.rander(JSX 代码,DOM 节点)

上述代码中的 h1 标记实现的内容其实是 JSX 语法的代码，而不是 HTML 语法的代码，只管它们临时长得很像。第二个参数应用 document.querySelector()办法指定了一个 DOM 节点，也就是 body 标记对外部的 id 属性取值为 app 的那个 div。

ReactDOM.render()办法有以下两个次要性能：

将 JSX 代码转换为 HTML 格局的标记对。
将转换的 HTML 格局的标记对插入到指定的 DOM 节点外部。

3、了解了上述代码的概念，当初能够在 webStorm 编辑器中执行该我的项目了。如果大家在编写 React 代码时发现 webStorm 编辑器顶部有一个修长条提醒，如下图所示。

这条修长的提醒内容为：Switch language version to React JSX，中文翻译为切换语言版本为 React JSX。右侧有两个选项：Switch 示意切换，Dismiss 示意不予理睬。

这里倡议大家抉择“Switch”，否则编辑器因为无奈正确的辨认 JSX 语法格局而呈现多处语法错误提醒。

React 框架对于 DOM 节点的生成采纳了 JSX 语法格局，这是一种专门用于 React 的 DOM 节点生成模式。从实质上说，能够了解为 HTML 标记对和 JavaScript 语言的这一种联合。

本节咱们对 JSX 语法进行一个初步的意识，下一篇文章会为大家具体的解说 JSX 语法的要求。

上面这个例子，咱们只做一个数组，利用 JSX 语法格局将数组中的元素在页面中渲染为一个无序列表。代码如下所示。

let list=[‘张三’,‘李四’,……];
ReactDOM.render(
  <div>
    <ul>
      {
        list.map(item=>{return <li>{item}</li>
        })
      }
    </ul>
  </div>,
  document.querySelector("#app")
)

根据上述代码，咱们能够得出无关 JSX 语法的以下论断：

JSX 语法中的 HTML 局部仍然采纳标记对书写。
JSX 语法中的 JavaScript 须要用 {} 进行包裹。
对数组的遍历只能应用数组的办法（例如：map()），不能应用 for 循环。

- *

本文是 React 系列教程的第一篇文章，次要为大家解说了 React 我的项目的搭建，意识了 JSX 语法的根本格局，学习了 ReactDOM.render()办法的应用。今天会为大家零碎的解说 JSX 语法的书写格局。

小海前端，具备 18 年 Web 我的项目开发和前后台培训教训，在前端畛域著有较为零碎的培训教材，对 Vue.js、微信小程序开发、uniApp、React 等全栈开发畛域都有较为深的造诣。入住 Segmentfault，心愿可能更多的结识 Web 开发畛域的同仁，将 Web 开发鼎力的进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。

正文完