react教程 (通过script引入)

最新推荐文章于 2025-06-23 09:20:50 发布

weixin_30596735

最新推荐文章于 2025-06-23 09:20:50 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 数据结构与算法 java ViewUI

原文链接：http://www.cnblogs.com/wfblog/p/9999637.html

本文提供了一个React初学者的全面指南，包括React的基础概念、组件创建、JSX语法介绍及其实例教程。通过阮一峰的博客和实战代码，读者可以快速上手React，了解如何使用ReactDOM.render()方法渲染组件，掌握组件的属性传递以及虚拟DOM的概念。

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

1、React 入门实例教程：http://www.ruanyifeng.com/blog/2015/03/react.html （阮一峰的博客）或 https://segmentfault.com/a/1190000012921279（作为阅读参考）

<!DOCTYPE html>
<html>
  <head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

注意：Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。

2、ReactDOM.render() ：将模板转为 HTML 语言，并插入指定的 DOM 节点。render() 里面的参数是 JSX 语法。这个方法类似于 vue 的，new Vue()，启动 react 引擎。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

注意：JSX 语法不是 JS 引擎解析的，所以不要完全使用js的语法规则去分析 JSX 代码。JSX 编译后的代码才是 js 代码。

3、组件：

var HelloMessage = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('example')
);

注意，组件类的第一个字母必须大写，否则会生效，比如HelloMessage不能写成helloMessage。另外，组件类只能包含一个顶层标签，否则也会生效。

4、this.props.children ：参考，阮一峰的教程

5、PropTypes ：参考，阮一峰的教程

6、获取真实的DOM节点：参考教程

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。

根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

7、其他的参考教程

转载于:https://www.cnblogs.com/wfblog/p/9999637.html