【react系列学习】最简单的hello world

最新推荐文章于 2024-08-04 23:42:30 发布
最新推荐文章于 2024-08-04 23:42:30 发布
阅读量101 收藏
点赞数 1
分类专栏： react 文章标签： react django node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhouruirui/article/details/126285557
版权

Vscode新建js文件夹包括三个js文件，babel.min.js用于将jsx转为js，react.development.js是react的核心库，react-dom.development.js用于支持react操作DOM，下面在新建的hello_react.html文件中新建hello world代码：

<!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>
        <script type="text/javascript" src="../js/react.development.js"></script>
        <script type="text/javascript" src="../js/react-dom.development.js"></script>
        <script type="text/javascript" src="../js/babel.min.js"></script>
    </body>
    <script type="text/babel">
        const VDOM = <h1>Hello,World！</h1>
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
</html>

 邮件vscode，open with live server，输出如下：

 

weixinhao_kf3384
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
React入门系列：HelloWorld和JSX
桃花庵下桃花仙
03-11 311
准备 前端知识基础：html，css，js 前端工程基础：nodejs，npm，webpack 开发环境准备：vs code及相关插件 快速开始 第一个应用：Hello,World！ # create-react-app是react脚手架 npm install -g create-react-app # 用脚手架创建一个react-hello项目 create-react-app react-h...
React-Native学习笔记——Hello,World
听听脚步声
01-04 303
背景 先列出一些关键字：facebook、reactjs、react-native；reactjs是facebook开发的前端框架，react-native是facebook创造的一套混合开发解决方案。react-native应用页面及业务逻辑使用reactjs开发，当然还要写一些原生代码。 所以正确的学习路线为：es6、reactjs、react-native。 es6可以先了解最
React学习Hello World！
boysky0015的博客
08-04 241
天才就是无止境刻苦勤奋的能力－－卡莱尔 Hello World! 最简单的React例子，像下面这样： ReactDOM.render( &amp;amp;amp;lt;h1&amp;amp;amp;gt;Hello,World!&amp;amp;amp;lt;/h1&amp;amp;amp;gt;, //这里也可以是一个组件，后面会讲到。比如&amp;amp;amp;lt;Hello /&amp;amp;amp;gt; do
React Native的Hello World和基本样式入门
微瞰技术的博客
03-03 529
Hello World  众所周知，Hello World大法好。接上一篇 所初始化的AwesomeProject项目来进行Hello World操作。import React, { Component } from 'react'; import { AppRegistry, Text } from 'react-native';class HelloWorldApp extends Compo
React HelloWorld和组件
weixin_46146313的博客
06-29 138
这节课先把src目录里的文件全部删除，我们一点点写一个·HelloWorld·程序，并通过编写这个程序了解一下什么是React中的组件化编程。 入口文件的编写 写一个项目的时候一般要从入口文件进行编写的，在src目录下，新建一个文件index.js，然后打开这个文件。 写入下面4行代码: import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render(<App /&gt
react native之helloworld
mockingbirds的专栏
01-05 1355
上一篇博客学习了如何在windows下搭建reactnative开发环境，先来简单总结一下吧： 安装react-native命令： #在终端输入如下命令来安装react-native命令 npm install -g react-native-cli 创建react native工程 #同样在终端下输入如下命令来创建react native工程 react-native init 工程名 开启re
React学习之路二：从Hello World开始的初体验
u013418556的博客
02-24 367
       React最核心思想就是组件。组件就是独立的、可以重复利用的代码。这就是分而治之的思想，非常的牛逼。传统前端开发是把js、css和html文件分开进行管理，而基于组件的前端开发是把功能相同的组件的代码都放在一起，这样的重复使用更方便，而且真正达到了高内聚低耦合的思想。所有语言都是从hello world开始的，但是这是简单的显示Hello World没什么意思，上一章已经实现了，通过...
React 2 hello world
小仙女儿的魔仙堡
08-14 250
React 特点 声明式设计 −React采用声明范式，可以轻松描述应用。 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活 −React可以与已知的库或框架很好地配合。 JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。 组件 − 通过 React 构建组件，使得代码更加
React-HelloWorld
浩秦的博客
12-06 93
React-HelloWorld 最简单的React示例如下： ReactDOM.render( <h1>Hello,world!</h1>, document.getelementById('root) ); 它将在页面上展示一个“Hello,world!”的标题。 在 CodePen 上尝试 点击链接打开在线编辑器。随意...
Django学习-Django数据库模型定义
qq_42369064的博客
08-04 373
ORM框架是一种程序技术，用于实现面向对象编程语言中不同类型系统的数据之间的转换。它创建了一个可在编程语言中使用的虚拟对象数据库，在django中，虚拟对象数据库也被称为模型，通过模型实现对目标数据库的读写操作。# 自动增长的主键，用于唯一标识每个人员# 人员姓名，字符串类型，最大长度为20# 人员年龄，整数类型# 入职日期，日期类型# 定义对象的字符串表示形式# 返回人员的姓名# 元类，用于配置模型的元数据# 设置模型的可读名称verbose_name = '人员信息'
Django学习（二）
weixin_67852201的博客
07-25 855
当我门直接访问时会出触发django的csrf检测。
Django学习-数据迁移与数据导入导出
qq_42369064的博客
08-04 266
一般情况下，数据的导出和导入最好以整个项目或整个项目应用的数据为单位，因为数据表之间可能存在外键关联，如果只导入某张数据表的数据，就必须考虑该数据表是否设有外键，并且外键所关联的数据表是否已有数据。在实际开发过程中，我们经常对数据库的数据进行导入和导出操作，比如网站重构、数据分析和网站分布式部署等。里删除相应的文件执行记录。一般情况下不建议采用这种操作，因为这样很容易出现异常，比如数据表已存在的情况下，再次执行相应的。数据迁移是将项目里定义的模型生成相应的数据表。文件夹的某个.py文件，就只需在数据表。
django学习-数据表关系
qq_42369064的博客
08-04 240
多对多关系存在于两张或两张以上的数据表中，第一张表的某一行数据可以与第二张表的一到多行数据进行关联，同时第二张表中的某一行数据也可以与第一张表的一到多行数据进行关联。一对一关系存在于两张数据表中，第一张表的某一行数据只与第二张表的某一行数据相关，同时第二张表的某一行数据也只与第一张表的某一行数据相关，这种表关系被称为一对一关系。一对多关系存在于两张或两张以上的数据表中，第一张表的某一行数据可以与第二张表的一到多行数据进行关联，但是第二张表的每一行数据只能与第一张表的某一行进行关联。
Node.js(7)——Express
最新发布
m0_74386799的博客
08-04 173
express是基于Node.js平台，快速、开放、极简的Web开发框架。本质就是一个npm上的第三方包，提供了快速创建Web服务器的便捷方法。什么是express?
深入解析fs.writeFile的flag参数：掌握Node.js文件写入模式
计算机图形学
08-04 183
在Node.js的方法中，flag参数是一个非常重要的选项，它用于指定文件打开和写入的行为。下面将深入解析flag参数的不同值及其含义。flag。
Node.js模块化
weixin_45780818的博客
08-04 630
将一个复杂的程序文件依据一定规则（规范）拆分成多个文件的过程称之为模块化。其中拆分的每一个文件就是模块，模块的内部数据是私有的，不过模块可以暴露内部数据以便其他模块使用。.js.json。
深入解析fs.writeFile：掌握Node.js中的文件写入与权限设置
计算机图形学
08-04 229
在 Node.js 的方法中，mode参数用于指定文件的权限。这个参数是可选的，如果不指定，Node.js 会使用默认的权限设置，通常是0o666。
fs.writeFile的encoding参数深入解析：掌握Node.js文件写入编码
计算机图形学
08-04 242
在Node.js的方法中，encoding参数是一个可选参数，用于指定写入文件时数据的编码格式。下面将深入解析encoding参数的使用及其重要性。
react简单项目实例
10-17
<h1>Hello, World! ); } export default App; ``` 这将创建一个简单的 React 组件，它将在页面上显示一个标题。 最后，您需要将该组件导入到 index.js 文件中，并将其呈现在页面上。在 src/index.js 文件中，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值