React——HelloReact实现

简介: React——HelloReact实现

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello_React</title>
</head>
<body>
    <!-- 准备好一个“容器” -->
    <div id="test">
    </div>
    <!-- 引入React核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入React-dom 用于支持React操作DOM -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script src="../js/babel.min.js"></script>  
    <script type="text/babel">  //此处一定要写babel
        // 创建虚拟DOM
        const VDOM = <h1>Hello,React!</h1>;
        // 渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'));
    </script>
</body>
</html>

实现效果

image.png

注意事项

  1. React相关库文件的引入是有顺序的,要先引入react.development,然后是dom然后是babel.
  2. 赋值给虚拟DOM是不用加引号的。
相关文章
|
4月前
|
前端开发 JavaScript 容器
第二章 简单实现Hello React案例
第二章 简单实现Hello React案例
|
12月前
|
前端开发 JavaScript
React快速入门(1)之HelloReact
React快速入门(1)之HelloReact
39 0
|
XML 存储 JSON
React全家桶: React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
React全家桶: React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
128 0
React全家桶: React简介--hello react 案例--虚拟DOM与真实DOM-- jsx语法规则
|
前端开发
React工作39:react中的Hello World
React工作39:react中的Hello World
40 0
|
Web App开发 前端开发 JavaScript
《React极简教程》第一章 Hello,World!
react React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
1166 0
|
Web App开发 SQL 前端开发
React极简教程: Hello,World!
React简史 A declarative, efficient, and flexible JavaScript library for building user interfaces. https://facebook.github.io/react/ 一个声明式的,高效的,和用于构建用户界面的灵活的JavaScript库。
1216 0
|
前端开发 JavaScript
hello React.js
转载地址: http://www.ruanyifeng.com/blog/2015/03/react.html /** * Created by Administrator on 2016-12-8. */ import React from 'react'; import ReactDOM from 'react-dom'; var names = ['Alice', '
1308 0
|
前端开发 JavaScript
React(0.13) hello world
React JS React.
503 0
|
10天前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
2天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择