React、Hello World

已于 2022-02-07 11:05:37 修改
阅读量88 收藏
点赞数
分类专栏： 个人学习 文章标签： react.js javascript 前端
于 2022-02-07 11:02:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43266137/article/details/122805851
版权

Hello World

直接在页面上使用React，引用下面的JS

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

React.createElement

创建一个React元素，称作虚拟DOM，本质上是一个对象

  1. 参数1：元素类型，如果是字符串，一个普通的HTML元素
  2. 参数2：元素的属性，一个对象
  3. 后续参数：元素的子节点

JSX

JS的扩展语法，需要使用babel进行转义。

使用脚手架搭建工程

官方：create-react-app
第三方：next.js、umijs

凡是使用JSX的文件，必须导入React

开发环境搭建

VSCode配置

emmet配置：

"javascript": "javascriptreact"

VSCode插件安装

  • ESLint：代码风格检查
  • ES7 React/Redux/GraphQL/React-Native snippets：快速代码编写

Chrome插件安装

React Developer Tools

是小松呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是JSX、是如何使用以及注意事项
weixin_46116626的博客
03-14 5506
什么是JSX、是如何使用以及注意事项
React 学习 02 - Hello World
sdcnljg的博客
04-22 165
React 项目结构说明 使用 create-react-app 创建的项目结构如下图： 其中： node_modules：目录下存放 npm 安装的第三方依赖包 public：目录下存放静态资源文件 src：源代码目录，我们的代码都写在该目录下 .gitignore：git配置文件，git 管理代码时忽略提交的文件或目录配置在该文件下 package.json：npm 安装的第三方依赖包配置...
React中JSX&元素渲染&组件和Props
qq_45701130的博客
03-31 2552
一、JSX简介 JSX，是JavaScript的语法扩展，表示在JavaScript中写HTML的代码，可以很好的描述UI应该呈现出它应有交互的本质形式。 1、JSX是一个表达式 在编译之后，JSX表达式会被转为普通的JavaScript函数调用，并得到其返回值。 所以，我们可以在if语句、for循环的代码块中使用JSX，可以将JSX赋值给变量，可以把JSX当做参数传入。 2、JSX特定属性 1、可以通过引号，将属性值指定为字符串字面量 const element = <div tabIndex="1
JSX 学习笔记
最新发布
m0_72410588的博客
07-22 104
JSX（JavaScript XML）是一种类似于模板语言的 JavaScript 语法扩展。它允许我们在 JavaScript 代码中直接编写 HTML 结构，并通过 Babel 等工具将其转换为普通的 JavaScript 代码。JSX 最初是为 React 开发的，但也可以在其他框架或库中使用，或者直接在原生 JavaScript 中使用。通过本篇学习笔记，我们详细介绍了 JSX 的概念、使用方法和常见实践。
React（2）认识JSX语法格式
小海前端
12-24 1529
文章目录前言一、JSX语法的基本用法1、使用变量定义JSX元素2、使用变量定义嵌套的JSX元素3、在JSX元素中使用变量4、在JSX元素中调用函数二、JSX元素的语法规定三、在JSX格式中遍历数组四、在JSX格式中使用if语句1、使用三元运算符在JSX中实现判定2、使用逻辑与运算符的短路原理实现判定3、在JSX格式以外借助变量使用if语句完成判定4、在JSX格式以外借助函数使用if语句完成判定总结关于作者 前言 React框架推荐使用的DOM语法格式为JSX语法，属于一种JavaScript扩展，Reac
JSX表达式用法（二）——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值
weixin_44867717的博客
12-30 928
JSX表达式用法（二）——JSX元素本身就是表达式 & JSX元素可以作为函数的参数 & JSX元素可以作为函数的返回值 JSX可以赋值给变量 作为函数的参数 作为函数的返回值 function showInfo (info) { // return info; return ( <div> <div>测试JSX返回值</div> {info} </div> ) } let element
React入门HelloWorld示例
09-08 1970
1.概论 Facebook构建数据不断变化的大型应用。 数据变化——大量dom操作、逻辑及其复杂 自动dom操作 状态对应内容 特点： 简单 声明式 React的核心是组件，组件的设计目的是提高代码复用率、降低测试难度和代码复杂度。 提高代码复用率：组件将数据和逻辑封装，类似面向对象中的类。 降低测试难度：组件高内聚低耦合，很容易对单个组件进行测试。 2.环境搭建（当
Parcel 打包示例(React HelloWorld)
01-19
Parcel 打包特点 极速打包时间 Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存，即使在重启构建后也能快速再编译。  将你所有的资源打包 ... 自动转换 如若有需要，Babel, PostCSS, 和PostHTML甚至 node...
react-native-helloworld:将React Hello World应用程序转换为React Native应用程序
05-16
- `react-native-helloworld-master`这个文件名可能表示的是项目源代码的主分支。通常，React Native项目的根目录下会有`index.js`作为入口文件，`App.js`包含应用的主要组件，`package.json`记录项目依赖和配置，...
待办事项：Simple React Hello World
02-18
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 ...
react_helloworld
03-13
react_helloworldCreate React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中...
由ReactJS的Hello world说开来
10-23
标题“由ReactJS的Hello world说开来”暗示了文章将从编写ReactJS的入门级示例“Hello world”程序开始，逐步深入介绍ReactJS的相关知识和核心概念。在入门阶段，通过一个简单的示例程序可以帮助新手快速理解ReactJS...
react Hello wrold到JSX语法规范(第二节)
lzDevastator的博客
07-13 145
文章目录Hello WorldReact.createElementJSX使用脚手架搭建工程开发环境搭建VSCode配置VSCode插件安装Chrome插件安装JSX什么是JSX在JSX中嵌入表达式元素的不可变性 Hello World 直接在页面上使用React，引用下面的JS <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script cros
JSX元素本质（三）——不是DOM元素，而是普通对象 ,该对象描述了真实DOM元素 & 语法-React.createElement(element, [props], [...children])
weixin_44867717的博客
12-30 341
JSX的本质（三）——JSX元素本质上不是DOM元素，而是普通的对象 {} ,该对象描述了真实的DOM元素 & 语法格式-React.createElement(element, [props], […children]) // 函数原型 React.createElement(element, [props], [...children]) // ------------------------------------------------ const element = ( <h1
React的hello world
m0_72694993的博客
08-20 444
方法：参数1: 要渲染的react元素,参数二 Dom容器对象)学习一个新的语言/框架，我们通常最先让他的输出显示hello world，那么接下来运用react的俩种方式输出hello world。2.在其中function App（）中找到return，将return中的基本样式清空，输入hello world2.使用react构建用户界面(type='text/babel"将代码进行转换，转换为能识别的代码)首先，要引入三行代码，见上一篇，做好准备工作，我们就可以开始正式进行了。
React 的 Hello World
代码小疯子
02-10 1922
1 项目创建 创建项目目录 demo1 ,然后使用 idea 打开 这个项目目录 ，然后打开 idea 的 termial 命令行工具 1.1 初始化项目 npm init 1.2 安装 browser-sync Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面 browsersync使用说明文档 npm inst...
React简单使用（一）之react环境搭建以及Hello world实现
指尖的星光的博客
09-01 1292
前言 背景：由于我本身是后端开发出身的，但是在公司做了全栈的工作，所以需要学习前端的一些知识。最近公司前端用的是react，所以我就需要自学react。 定位 我暂时只需要能够简单的使用react开发一些页面，就足够了，不需要更深入的了解。 只需要学会简单的使用即可。 正文 1、参考文档 菜鸟教程 Node.js安装和配置 React学习（一）——基础项目搭建以及环境配置 React官方...
React入门-JSX与元素渲染
老杨头的博客
04-15 535
什么是JSX const element = <h1>Hello, world!</h1>; 以上标签语法既不是字符串也不是 HTML，它被称为 JSX，是一个 JavaScript 的语法扩展。JSX 有点类似模板语言，但它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。 JSX 标签里可以包含很多子元素： const element = ( <div> <h1>Hell...
vue虚拟Dom详解
不是程序猿呀的博客
06-15 6765
虚拟dom本质上是一个js对象，用来描述视图的界面结构，在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这意味着每个组件都对应着一颗虚拟dom树 在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建的时候，还发生在视图依赖的数据更新的时候，如果在渲染时，直接使用真实dom，由于真实dom的创建，更新，插入会带来大量的性能消耗，从而就会极大地降低渲染效率，因此，vue在渲染时，使用虚拟dom来替代真实dom主要是解决渲染效率的问题每个组件实例首次被
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值