1、初识Reactjs——HelloWorld程序

最新推荐文章于 2025-06-22 12:18:35 发布

yubo_725

最新推荐文章于 2025-06-22 12:18:35 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： React js 文章标签： reactjs facebook javascript

本文链接：https://blog.csdn.net/yubo_725/article/details/50531732

React js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍React.js的基本概念，包括其简单性和表达能力的特点，并通过一个Hello World实例演示如何使用React.js创建用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Reactjs简介

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V（视图）。
我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

简单

仅仅只要表达出你的应用程序在任一个时间点应该长的样子，然后当底层的数据变了，React 会自动处理所有用户界面的更新。

表达能力 (Declarative)

当数据变化了，React 概念上是类似点击了更新的按钮，但仅会更新变化的部分。

二、开始使用React

react的官网是： http://facebook.github.io/react/ 或者可以访问中文的网站： http://www.reactjs.cn/

第一步：下载react，可以从官网上直接下载。

第二步：新建一个index.html文件，在其中引用react相关的文件，主要是如下两个文件：

<script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
<script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>

第三步：编写JSX代码。

react推荐我们使用JSX形式的代码，JSX即JavaScript XML的缩写，是Facebook推荐的一种js和xml混写的代码，比如下面一段代码：

<script type="text/jsx">
  React.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

可以看到，上面的script标签里，type类型指定为"text/jsx"，代表下面包裹的代码段是JSX格式的语法，而React.render函数里，接收了两个参数，第二个参数是js代码，第一个参数却是html的代码。下面是Facebook官方对于JSX语法的说明：

为什么要使用 JSX？
你不需要为了 React 使用 JSX，可以直接使用纯粹的 JS。但我们更建议使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
对于非专职开发者（比如设计师）同样比较熟悉。
XML 有固定的标签开启和闭合。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
它没有修改 JavaScript 语义。

三、使用React编写Helloworld程序

react的核心是组件，组件使代码复用、测试和关注分离（separation of concerns）更加简单。下面一段代码在浏览器中解释执行后，会显示Hello world，如下图所示：

下面是index.html文件的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Props</title>
	<script type="text/javascript" src="../react-0.13.0/build/react.js"></script>
	<script type="text/javascript" src="../react-0.13.0/build/JSXTransformer.js"></script>
</head>
<body>
	<div id="container"></div>
	<script type="text/jsx">
		var HelloWorld = React.createClass({
			render: function() {
				return (
					<div style={{fontSize: '50px'}}>HelloWorld.</div>
				);
			}
		});	
		React.render(
			<HelloWorld />,
			document.getElementById('container')
		);
	</script>
</body>
</html>

下面解释下代码中的几个问题：

1、首先在jsx代码中，我们使用React.createClass函数创建了一个组件，这个是react的核心，createClass接收一个对象，这个对象里最关键的是render函数，浏览器中展示出来的内容，就是通过render函数渲染出来的，render函数的返回值，是一段类似html<div>标签的代码，我们给div标签指定了一个类似css的样式，但是这个style的写法不同于在html标签中的css写法，因为这里是JSX语法，所以style后面是用花括号{}包裹起来的，同时在css中的font-size，在这里是用驼峰命名法写作fontSize。

2、上面用React.createClass创建了一个组件，下面的React.render函数，将这个组件渲染到id为container的div标签中。

3、react规定，自定义组件的命名，都是以大写字母开头，这是为了和html中的标签区分开来