React-1.实现HelloWorld

最新推荐文章于 2024-05-24 09:15:22 发布
最新推荐文章于 2024-05-24 09:15:22 发布
阅读量161 收藏
点赞数
分类专栏： 前端JS 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43444623/article/details/84844513
版权

初始化

npm init

简单配置一下package.json；
安装依赖

npm install react react-dom babel-standalone -S
  • react 核心库
  • react-dom 提供与DOM相关的功能
  • babel-standalone 将JSX语法转为JS语法

编写一个helloworld.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HelloWorld</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
    <div id="helloworld"></div>
    <script type="text/babel">//注意type="text/babel，这样可以识别并编译JSX语法
    //用于将模板转为html语言，并插入指定DOM节点
         ReactDOM.render(
            <ul className="parent">//不能用class，只能用className
                <li >111</li>    
                <li>222</li>    
                <li>333</li>    
            </ul>,    //这里有个逗号
            document.getElementById('helloworld')
        ); 
        //方法二
        /* var child1 = React.createElement("li",{id:'a'},'111'); 
         // null 这个位置可以设置该元素的类名 、id名；是null的话就只是一个普通标签
        var child2 = React.createElement("li",null,'222');
        var par = React.createElement("ul",{className:'parents'},child1,child2);
        ReactDOM.render(
            par,
            document.getElementById('helloworld')
            ) */
    </script>
</body>
</html>

注

  1. 设置 <script type="text/babel">，用来支持JSX语法
  2. 只能有一个根目录，上述代码不会同时出现两个ul模块，只能显示一个。
var sty = {
          fontSize:"20px",
          color:"red"
      }
      var flag = false;
          ReactDOM.render(
            <ul className="parent">
                <li style={sty}>{flag===true?'111':'123'}</li>    
                <li>222</li>    
                <li>333</li>    
            </ul>,
            document.getElementById('helloworld')
        );

注

  1. react不支持if ···else·· 只支持三目运算符
web-K
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 的 Hello World
代码小疯子
02-10 1912
1 项目创建 创建项目目录 demo1 ,然后使用 idea 打开 这个项目目录 ，然后打开 idea 的 termial 命令行工具 1.1 初始化项目 npm init 1.2 安装 browser-sync Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面 browsersync使用说明文档 npm inst...
从零开始学习React——(三)：HelloWorld简单组件的编写
qq_19249021的博客
01-06 572
万物起源Hello World~ 本节开头可以先将src文件夹的文件全部删除，然后通过以下步骤写一个Hello World程序。这个编写过程可以更直观的了解什么是组件化(模块化)编程。 1. 入口文件编写 一个项目，一般从入口文件开始编写，本项目中在src目录下新建一个index.js，然后打开它，开始我们的React之旅。 写入如下代码： // 引入React文件 import React from 'react' // 引入React-dom文件包 import ReactDOM from .
React开发入门-HelloReact-01
最新发布
编程是一门实践技术
05-24 995
React 是 Facebook 在 2013 年开源在 GitHub 上的 JavaScript 库。React 可以把用户界面抽象成一个个组件，如按钮组件 Button、对话框组件 Dialog、日期组件 Calendar，开发者通过组合这些组件， 最终得到功能丰富、可交互的页面。同时引入了 JSX 语法，使复用组件变得非常容易，也能保证组件结构清晰。有了组件这层抽象，React 把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到 DOM 来开发网页外，还能用于开发原生移动应用。
react1-基本介绍
weixin_64925940的博客
06-04 383
react项目创建，相关依赖包介绍，任务指令介绍，入口文件，JSX，组件，state与props，prop-types运行时类型检查，Ref，组件通信，Context API,生命周期
React的hello world
m0_72694993的博客
08-20 417
方法：参数1: 要渲染的react元素,参数二 Dom容器对象)学习一个新的语言/框架，我们通常最先让他的输出显示hello world，那么接下来运用react的俩种方式输出hello world。2.在其中function App（）中找到return，将return中的基本样式清空，输入hello world2.使用react构建用户界面(type='text/babel"将代码进行转换，转换为能识别的代码)首先，要引入三行代码，见上一篇，做好准备工作，我们就可以开始正式进行了。
react1:这是一个学习项目
03-14
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（we
react-dom.development.js
11-01
babel.min.js下载，react相关的js包文件，助你快速入门react的hello world demo，省去找资料的时间，快人一步！
react下的react.min.js和react-dom.js
04-24
在这个例子中，我们首先导入了`react`和`react-dom`，然后定义了一个名为`HelloWorld`的React组件，最后使用`ReactDOM.render()`方法将组件渲染到页面中id为`root`的元素内。 React的组件化思想使得代码结构清晰，...
react-18.2.0.zip
01-11
例如，你可以创建一个简单的`HelloWorld`组件如下： ```jsx function HelloWorld() { return <h1>Hello, World!; } ``` 在React 18.2.0版本中，有一些重要的更新和改进。其中一项重大更新是“Concurrent Mode”，...
react-prism:React.js + Prismjs语法重点组件
04-23
function helloWorld() { console.log('Hello, World!'); } `; return ( {code} ); } export default CodeBlock; ``` React-Prism还可能提供其他自定义选项，如主题、行号显示等，这些可以通过传递额外...
react-standard.zip
01-05
在这个例子中，我们定义了一个名为`HelloWorld`的React组件，它接受一个名为`name`的属性，并在渲染时显示出来。 React使用虚拟DOM（Virtual DOM）来提高性能。当组件的状态改变时，React会计算出最小的DOM更新，而...
reactHelloWorld
07-08
构建 JSX --> javascript： $ jsx src build [OR] $ jsx watch src build $ jsx --help
Hello-World-React：一个使用react的简单hello world程序
02-13
该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中
React简单使用（一）之react环境搭建以及Hello world实现
指尖的星光的博客
09-01 1272
前言 背景：由于我本身是后端开发出身的，但是在公司做了全栈的工作，所以需要学习前端的一些知识。最近公司前端用的是react，所以我就需要自学react。 定位 我暂时只需要能够简单的使用react开发一些页面，就足够了，不需要更深入的了解。 只需要学会简单的使用即可。 正文 1、参考文档 菜鸟教程 Node.js安装和配置 React学习（一）——基础项目搭建以及环境配置 React官方...
react学习—hello world
xun__xing的博客
04-14 364
hello world一、初用react1、React.createElement2、JSX 一、初用react 1、React.createElement <div id="root"></div> <!-- React的核心库，与宿主环境无关 --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- 依赖
react native 之hello world
蒙的博客
11-13 1421
前言：前几天将react native开发需要的环境给搭建了起来，并且也初始化了一个react native 项目，这篇文章接着上个阶段，将细致的一步到位的简单的告诉对面的你怎么去将初始化的react native 项目在真机上跑起来，并且推开RN技术学习的大门，实现标志性的效果 hello world！！ 友情提示：以下流程的操作是基于我的windows电脑已经配置了java，安装了R
一个简单的例子Docker Hello World
iteye_5722的博客
05-01 168
一 简介 Docker允许你在容器内运行应用程序，使用docker run命令来在容器内运行一个应用程序。   二 运行脚本 [root@localhost ~]# docker run ubuntu:15.10 /bin/echo "Hello world" Unable to find image 'ubuntu:15.10' locally Trying to pull rep...
React入门系列 - 2 编写第一个Hello world的React程序
weixin_34336292的博客
01-09 185
2.1 采用create react app 编写 create-react-app项目 [点击前往Github] 是facebook推出的入门初始化项目，适合新手第一次使用，无需进行各种配置，完美的实现了开箱即用理念。 2.1.1 建立项目 npx create-react-app my-app cd my-app npm start 复制代码npx命令是npm在5.x版本之后推出的一个增强功能...
idea创建react项目
qq_39574558的博客
06-14 3688
安装node教程：（要装8及以上版本） 添加链接描述 安装create-react-app 添加链接描述 idea创建react项目 添加链接描述 node目录：E:\node create-react-app目录： 出现的问题： 目录不全：node版本过低 node和create-react-app没有提前下载 ...
react-dom.development.js:29345 Uncaught Error: createRoot(...): Target container is not a DOM element.
06-07
return <h1>Hello World!; } // 通过 ID 选择器获取目标元素 const rootElement = document.querySelector("#root"); // 使用 createRoot 进行挂载 ReactDOM.createRoot(rootElement).render(); ``` 在这个示例...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值