React框架编写hello,world

最新推荐文章于 2022-08-20 10:17:14 发布
最新推荐文章于 2022-08-20 10:17:14 发布
阅读量319 收藏 1
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muxingzz/article/details/106018570
版权

React框架编写hello,world的两种方式

方法1:

使用CDN（网络加速节点）引入React框架：（此方法一般用于多页面开发）两个链接(React框架中的核心库）如下：

· https://unpkg.com/react@16/umd/react.development.js
· https://unpkg.com/react-dom@16/umd/react-dom.development.js

1. 在适当位置创建文件夹，用VScode打开该文件夹，创建index.html文件；
2. 编写html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Demo 1</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src=" https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>  
</head>

<body>
    <div id="app"></div>
    <script>
          var hello = React.createElement('h1', {}, "Hello,world");//es5的语法//创建标签 属性参数 默认值
          ReactDOM.render(hello, document.getElementById('app'));      //元素渲染 参数1:需要渲染的标签 参数2：渲染的位置        
    </script>
</body>

</html>

方法2：

使用npm方式引入React框架：
1. Windows + R 进入运行，输入cmd,进入命令提示框中（黑框）；
2. 输入你的html文件所在的路径：（我的路径如下）
在这里插入图片描述
这是我的html文件所在的目录；

3. 使用 yarn 添加 react 和 react-dom 并保存；
在这里插入图片描述
4. 编写 html 代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Demo 1</title>
    <script src="node_modules/react/umd/react.development.js"></script>
    <script src="node_modules/react-dom/umd/react-dom.development.js"></script>

</head>

<body>
    <div id="app"></div> 
    <script>
          var hello = React.createElement('h1', {}, "Hello,world");//es5的语法//创建标签 属性参数 默认值
          ReactDOM.render(hello, document.getElementById('app'));      //元素渲染 参数1:需要渲染的标签 参数2：渲染的位置
    </script>
</body>

</html>

注意头部文件中React 和 React-dom 库的路径引入！！！

花姐爱世界
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React入门之HelloWorld及环境搭建
LiuHe
04-22 1万+
关注React也已经很久了，一直没能系统地深入学习，最近准备好好研究一下，并且亲自动手做一些实践。 学习一门语言也好，学习一个框架也好，都是从最初的hello world程序开始的，今天我们也来用React写一个hello world出来，了解一下如何编写及运行React。 在官方文档中，有一种方式是基于npm的，我比较喜欢这种方式，这也是官方比较推荐的，下面我们就一步一步创建一个React的...
react 编写 第一个 Hello，world
qq_44170622的博客
12-24 192
终于来到了react开发，心里还是比较开心的。 今天就来说说如何在react上面打印第一个hello，world 1首先我们可以建立一个react脚手架作为我们的demo npm install -g create-react-app create-react-app 你的项目名 安装完成后cd 进去 npm run start 2.然后我们可以尝试删除多余的文件，留下我们的APP.js和index.js里面 紧接着我们可以在我们的APP.里面写我们的组件，紧接着我们可以把我们的组件进行导入
react+typescript 编写一个简单的hello world
weixin_43398820的博客
03-27 2385
开发环境配置 利用create-react-app脚手架创建一个支持typescript语法的项目 create-react-app官方文档地址： https://create-react-app.bootcss.com/docs/getting-started 执行安装命令 npx create-react-app my-app --template typescript 注：最新的版本的npm需要加上–template npx是在安装npm5.2.0+时自动安装的 简单了解了一下：npx 会自动查
react项目入门教程
前端技术教程
12-29 1288
JSX 如果你经常注意React你也许会发现有个东西叫JSX。JSX允许我们在Javascript中写HTML，而不是用HTML包含Javascript。它能帮助我们快速开发，因为我们不用担心字符串和换行等。你可以在浏览器中运行JSX，但是不推荐，因为这样会减慢你的页面速度。gulp和grunt为你的预处理任务提供了一个JSX解释器，所以如果你想使用JSX，我建议开启这个功能。 使用
学习React(2) - 用react 来写Hello World
CHNMSCS
06-22 458
在上一篇的学习React(1) 中已经介绍如何在VS Code中用react, 那么现在就将展示如何用react来写Hello World. 第一步： 先得在src文件夹下，创建一个js文件名, 博主就将这个文件名命名为：HelloWorld.js 。 第二步： 在 HelloWorld.js 文件里写入这几行代码： import React from 'react'; const HelloWorld = (props) => { return( <h1>Hel
React框架教程.docx
最新发布
06-10
React框架教程、案例及相关项目如下： 教程： 1. 创建React项目：首先，你需要安装Node.js和npm（Node.js的包管理器）。然后，通过npm安装create-react-app，这是一个官方提供的脚手架工具，用于快速创建新的React...
2_编写helloWorld.pdf
09-13
React Native是一个由Facebook开发的开源框架，允许开发者使用JavaScript和React库构建原生移动应用程序。与Web开发不同，React Native使用原生组件而不是Web组件，提供更接近原生应用的性能和用户体验。 首先，...
ImageShare：我的React Native“ Hello World”移动应用
02-09
React Native是由Facebook开发的开源框架，允许开发者使用JavaScript编写原生的iOS和Android应用程序。JavaScript作为这款应用的主要编程语言，提供了丰富的功能和灵活性，使得开发者能够高效地构建跨平台的应用程序...
由ReactJS的Hello world说开来
10-23
主要介绍了ReactJS的Hello world程序编写及其相关知识,React是Facebook开发并开源的JS框架,人气在当下急剧攀升,需要的朋友可以参考下
Simple-React-Redux-Example-Hello-World-Counter
05-18
标题中的“Simple-React-Redux-Example-Hello-World-Counter”表明这是一个关于React和Redux基本用法的示例项目，以一个简单的“Hello World”计数器为应用实例。这个例子将帮助开发者理解如何在实际开发中整合这两...
用react 写一个Hello world
weixin_43742121的博客
10-15 355
1、准备环境 安装node.js 用node -v 和npm -v出现正确的版本号说明Node 和 npm 都没有问题 2、安装脚手架 npm install -g create-react-app 3、创建一个React项目 D: //进入D盘 mkdir ReactDemo //创建ReactDemo文件夹 create-react-app demo02 //用脚手架创建React...
前端学习（3159）：react-hello-react之一个简单的helloworld
歌谣的博客
07-10 117
React学习之路（一）写一个HelloWorld
Dreamer_xr的博客
07-03 381
最近打算学习react，所以找来了收藏已久的胖哥视频 JSpang网站：http://jspang.com/ 一、下载react环境（默认你已经安装好node环境） npm install -g create-react-app 二、安装react脚手架 mkdir ReactDemo //创建ReactDemo文件夹 create-react-app helloworld //用...
React的hello world
m0_72694993的博客
08-20 428
方法：参数1: 要渲染的react元素,参数二 Dom容器对象)学习一个新的语言/框架，我们通常最先让他的输出显示hello world，那么接下来运用react的俩种方式输出hello world。2.在其中function App（）中找到return，将return中的基本样式清空，输入hello world2.使用react构建用户界面(type='text/babel"将代码进行转换，转换为能识别的代码)首先，要引入三行代码，见上一篇，做好准备工作，我们就可以开始正式进行了。
vscode编写react_编写您的第一个React集成测试
weixin_26735933的博客
10-14 398
vscode编写reactWhen you are new to testing, it can feel daunting. Learning how to write integration tests for React applications is not easy. Most tutorials out there deal with simple “hello world” type...
使用reactjs输出Hello world
justforuse的博客
08-16 1657
简单的看了下Vuejs又去看了看Reactjs。官网地址：https://facebook.github.io/react/ 背后有Facebook撑腰。也需要现引入react.js 以及 react-dom.js。示例代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>
JAVA 对文件的基本操作
A_Thinking_Reed_的博客
06-10 1万+
import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.IOException;import java.io.Inpu...
ffmpeg命令基本语法和常见命令
子燕若水的博客
08-16 5万+
1、最简单转换命令 ffmpeg -i input.mp4 output.mkv 2、更加精准的控制转换命令 ffmpeg-iinput.mp4 -c:v vp9 -c:a libvorbis output.mkv （-c:v 控制视频格式， -c:a 控制音频格式） 3、调节比特率 ffmpeg-iinput.webm -c:a copy -c:v vp9 -b:v 1M output.mkv （-b:v 1M 代表着视频的比特率变成1Mb This will copy th...
不光彩又不得不为之的DD
热门推荐
谁伴我闯荡
09-30 6万+
SuperVoice 版本: 2.2 s/n: 220006165 SuperFax 版本: 6.0i s/n: 226104062 3DMark 2003 S/N：P424Y-EZ23Y-JJ2TK-FZAVK 3DMark 2001se Name:Jerry Hayes S/N：L5J4FCSD1NRKJPK1MLM6 3D Studio MAX R3.1 英文版S/N：110-1234567
react-native编写android程序
05-20
React Native 是一种用于构建iOS和Android应用程序的JavaScript框架，它使用类似于React的组件模型来构建用户界面。下面是在React Native中编写Android应用程序的基本步骤： 1.安装React Native 首先，您需要安装React Native。请按照React Native官方网站上的说明进行操作。 2.创建新的React Native项目 使用以下命令创建一个新的React Native项目： ``` react-native init MyProject ``` 这将创建一个名为MyProject的新项目。 3.在Android模拟器或设备上运行您的应用程序 使用以下命令在Android模拟器或设备上运行您的应用程序： ``` react-native run-android ``` 这将在Android模拟器或设备上启动您的应用程序。 4.编辑JavaScript代码 使用您选择的编辑器（如Sublime Text或Visual Studio Code）打开App.js文件，并开始编辑您的JavaScript代码。您可以使用React Native提供的所有组件和API，以及任何第三方JavaScript库。 5.测试您的应用程序 在编辑和构建您的应用程序后，使用以下命令重新构建并在Android模拟器或设备上运行您的应用程序： ``` react-native run-android ``` 现在，您可以测试您的应用程序并确保它在Android设备上运行良好。 这是一个简单的React Native Android应用程序示例： ``` import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default class MyApp extends Component { render() { return ( <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> <Text>Hello, world!</Text> </View> ); } } ``` 这将在屏幕中央显示“Hello, world!”文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值