React（1）初识React框架
前言
React框架在现代前端开发的项目中愈来愈经常使用，该框架的语法结构也深深的影响着其余框架在设计时的思路和理念。本专栏从这篇文章开始，以零基础出发，一步步总结和讲解React框架的使用。javascript
1、搭建React工做环境
首先咱们先来将React工做环境搭建起来。要想让React工做起来，须要用到下列三个库：html
- 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文档中。java
HTML文档的代码以下所示。react
<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>
上述代码须要注意如下两点：web
注意1：独立的index.js文件须要在加载时将script标记对的type属性取值为“text/babel”，而不是“text/javascript”。注意2：这样的方式运行React项目，须要借助WebStorm或VS Code这样的编辑器，在编辑器自带的内置服务器的帮助下才能正常启动项目。小程序
2、第一个React程序
搭建好了React工做环境，咱们来实现第一个React程序，即在浏览器的页面中显示一个一级标题，标题内容为“Hello,React!”微信小程序
一、首先，在HTML文档中设置一个div标记对做为React项目中DOM元素的总容器。会使用Vue.js的同窗能够将这个div理解为“挂载点”。同时还要为这个div标记对设置一个id属性或class属性，以保证在index.js文件中能够方便的引用该节点。数组
<body> <div id=“app”></div> </body>
二、其次，在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节点内部。
三、理解了上述代码的概念，如今能够在webStorm编辑器中执行该项目了。若是你们在编写React代码时发现webStorm编辑器顶部有一个细长条提示，以下图所示。
这条细长的提示内容为：Switch language version to React JSX，中文翻译为 切换语言版本为React JSX。右侧有两个选项：Switch表示切换，Dismiss表示不予理会。
这里建议你们选择“Switch”，不然编辑器因为没法正确的识别JSX语法格式而出现多处语法错误提示。
3、初步认识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开发大力的进行普及。同时也愿意与你们进行深刻的技术研讨和商业合做。
- 1. 初识时下热门框架 - React
- 2. React学习-React初识
- 3. react初始（1）
- 4. 初识React
- 5. react初识
- 6. React 初识
- 7. 初识react
- 8. React初识
- 9. 初识 react-redux
- 10. React系列---React（一）初识React
- 更多相关文章...
- • Docker 架构 - Docker教程
- • SSH框架（Struts2+Spring+Hibernate）搭建整合详细步骤 - Spring教程
- • 适用于PHP初学者的学习线路和建议
- • 常用的分布式事务解决方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 初识时下热门框架 - React
- 2. React学习-React初识
- 3. react初始（1）
- 4. 初识React
- 5. react初识
- 6. React 初识
- 7. 初识react
- 8. React初识
- 9. 初识 react-redux
- 10. React系列---React（一）初识React