react入门一搭建react运行环境
目前,由facebook开发的前端框架react很流行。据说其性能较其他的前端工具有很大的提升。随着越来越多的人的关注,react被认为可能是将来web开发的主流工具。
对于我自己来说,本身我是做后端的。但是现在javascript是如此的强大,掌握一个前端框架我觉的是作为一名程序员必不可少的技能。既然react如此火爆,选择react也是顺理成章的了。
我开始学习react的时候只是搭建环境就用了很长的时间。主要因为这是一门新的技术,操作的教程还是比较匮乏。但是对于入门的文章我个人还是比较推崇阮一峰老师的这一篇。
下面我们主要来介绍如何搭建react运行环境(总是感觉题目叫做搭建react运行环境总是不那么准确,因为react可以说是一个前端框架,也可以说是一个类库。运行环境自然需要浏览器的支持。与其叫搭建运行环境倒不如叫做如何引用react)。
这里有两种方式,一种是使用npm,另一种是不使用npm。下面我们先来看不使用npm的方式。
不用npm的方式引入react
对于这种方式,我们需要首先和react-dom的库文件。然后引入到html文件中。
html>
<html>
<head>
<meta charset="utf-8" />
<title>hello react!title>
<script src="build/react.js">script>
<script src="build/react-dom.js">script>
<script src="build/browser.min.js">script>
head>
<body>
<div id="content">div>
<script type="text/babel">
reactdom.render(
<h1>hello, world!h1>,
document.getelementbyid(‘content’)
);
script>
body>
html>
上面的例子中,在javascript中的xml语法被称为jsx,对于这种语法,在
转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处
本文地址:
相关文章
do you understand javascript closures?
发布时间:2025/02/21
浏览次数:108
分类:javascript
-
the function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. a closure itself is a core concept in javascript, and being a core concept, it is naturally also a difficult one.
do you know about the hidden traps in variables in javascript?
发布时间:2025/02/21
浏览次数:178
分类:javascript
-
whether you're just starting to learn javascript or have been using it for a long time, i believe you'll encounter some traps related to javascript variable scope. the goal is to identify these traps before you fall into them, in order to av
how much do you know about the prototype chain?
发布时间:2025/02/21
浏览次数:150
分类:javascript
-
the prototype chain can be considered one of the core features of javascript, and certainly one of its more challenging aspects. if you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
使用 python 将 pandas dataframe 保存为 html
发布时间:2024/04/21
浏览次数:106
分类:python
-
本教程演示如何将 pandas dataframe 转换为 python 中的 html 表格。
使用 jquery 更新 innerhtml
发布时间:2024/03/24
浏览次数:65
分类:javascript
-
在今天的文章中,我们将学习如何使用 jquery 更新或替换元素的内部 html。
如何在 javascript 中合并两个数组而不出现重复的情况
发布时间:2024/03/23
浏览次数:86
分类:javascript
-
本教程介绍了如何在 javascript 中合并两个数组,以及如何删除任何重复的数组。