前言

React框架在古代前端开发的我的项目中越来越罕用，该框架的语法结构也深深的影响着其余框架在设计时的思路和理念。本专栏从这篇文章开始，以零根底登程，一步步总结和解说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工作环境，咱们来实现第一个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语法格局而呈现多处语法错误提醒。

三、初步意识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语法的以下论断：

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

总结

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

对于作者

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