您的位置：首页 > Web前端 > React

1、初识Reactjs——HelloWorld程序

2016-01-17 14:32 525 查看

一、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中的标签区分开来

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： reactjs facebook javascript

相关文章推荐

新的分享

章节导航