React -- jsx语法和React环境搭建

最新推荐文章于 2023-02-03 16:37:22 发布
最新推荐文章于 2023-02-03 16:37:22 发布
阅读量238 收藏
点赞数
分类专栏： react 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46398959/article/details/104484205
版权

首先，感谢Facebook于2013年5月开源了其React框架，造福于全体前端程序员，下面开始学习！

React有什么特点？

声明式设计

高效

灵活

JSX语法

组件（复用）

单向响应的数据流（减少了重复代码）

jsx语法

jsx语法是一种语法糖，是为了更方便的书写代码

作用：就是在js里面写html

语法规则：

  • 注释：{/* 注释内容*/}
  • 标签内的js语句要用差值表达式包起来–{ }
  • 差值表达式中，你可以写for循环
  • jsx语法必须只能有一个根元素
  • script标签type属性为"text/babel"
  • value：表单元素 value 属性改为 defaultValue
  • checked：表单元素 checked 属性改为 defaultChecked
  • onXxx：标签中事件类型首字母大写
  • for：label 标签中的 for 属性改为 htmlFor
  • style：写对象 style={{color:‘red’}}
  • class：标签中 class 属性改为 className
  • jsx语法中对象不能直接渲染，数组是以字符串的形式渲染
  • 遍历列表：
    使用数组的map方法，对数组的每一项进行映射,每个节点必须都要指定key值
<body>
    <div id="box"></div>
    <script type='text/babel'>
        var arr = ['a','b','c']
        ReactDOM.render(<div>
                            {
                                arr.map((item,index)=>{
                                    <p key={index}>
                                        {item}
                                    </p>
                                })
                            }
                        </div>,
                        document.querySelector("#box"))
    </script>
</body>

搭建React开发环境

(此处采用脚手架环境)

安装react

npm i create-react-app -g

检查是否安装成功 create-react-app --version
能看到版本号，说明安装成功

创建项目

进去要创建项目的文件加下create-react-app 项目名称

启动项目

进入项目文件夹npm start 或是 yarn start

能打开，说明环境搭建成功！！

项目文件夹说明

A-小擎擎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-ReactcreateElement和JSX替代语法糖
08-15
React.createElement和JSX替代语法糖
React基础——安装、JSX、组件、生命周期
yaocong1993的博客
01-26 618
https://react.docschina.org/docs/hello-world.htmlReact教程 二、基本使用 webpack、Vue中的一、二搭建webpack环境 （1）安装 npm install --savereact react-dom安装 react：用于创建组件和虚拟DOM，包括组件的生命周期。 react-dom：将组件和虚拟DOM放到页面展示，Reac...
【React基础】安装使用、JSX及React组件基础
zilin_taku的博客
09-22 592
React是一个用于构建用户界面的JavaScript库。用户界面：HTML页面(前端）React主要用来写HTML页面，或构建Web应用如果从MVC的角度来看，React仅仅是视图层(V)，也就是只负责视图的渲染，而并非提供了完整的M和C的功能。React起源于Facebook的内部项目，后又用来架设Instagram的网站，并于2013年5月开源组件是 React的一等公民，使用 React就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点。
react17安装react-dnd提示Cannot find module ‘react/jsx-runtime‘解决方案
微光的博客
02-03 896
react17安装react-dnd提示Cannot find module 'react/jsx-runtime'解决方案
React学习（一、项目搭建及JSX初识）
weixin_68879157的博客
01-29 368
快来跟我一起学习React吧~~
React：JSX环境配置和基础语法，列表等操作
黑马程序员官方博客
05-24 441
第一篇：React入门以及学习资料汇总分享 JSX HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 与 JavaScript 的混写。 Introducing JSX JSX In Depth React Without JSX 环境配置 非模块化环境 babel-standalone 模块化环境 babel-preset-react Babel REPL 赋值查看编译结果 基本语法规则 必须只能有一个根节点 遇到 HT
react-hooks-jsx-lab
04-18
JSX实验室目标练习使用JSX语法创建HTML元素指示在本实验中，我们将在最顶层的组件App渲染一些子组件。 组件已设置，但我们需要更新它们返回的JSX。 我们将在NavBar.js ， Home.js和About.js文件中编写所有代码。 ...
babel-plugin-transform-react-createelement-to-jsx:将React.createElement调用转换为JSX语法
05-24
babel-plugin-transform-react-createelement-to-jsx 将React.createElement调用转换回JSX语法。 这对于转换开始时认为“我们不需要臭臭的编译器”的项目将已经编译的JS转换成可维护的东西（例如语法→ →→ react-...
preact-rollup-react-jsx-transforms：使用JSX语法对3p软件包进行精确处理
03-03
使用JSX语法预先处理3p软件包
react-jquery-mobile-jsx:使用 jQuery Mobile 示例将 React 重写为 JSX 语法
06-14
jQuery Mobile React 示例这是将重写为 JSX 语法此示例演示了如何使用 React 构建 jQuery Mobile 应用程序。 源代码基于 jQuery Mobile 的 。
jsx-runtime:JSX运行时
05-22
jsx运行时 JSX运行时：JSX.createElement（） 这是一个运行时库，用于在浏览器中呈现babel编译的JSX模板。 使用jsx-runtime 添加jsx-runtime作为依赖项： npm i @pinuts/jsx-runtime --save 要在任意模块中使用运行时，请像这样导入JSX，以将其添加到当前作用域中： import JSX from '@pinuts/jsx-runtime' ; function foo ( ) { return < h1> Hello World < / h1 > ; } 示例gulpfile.js 安装gulp 4，browserify，babelify和好友： npm i gulp@4 browserify babelify @babel/core @babel/preset-env @babel/pl
react jsx babel环境配置
cantianli1429的博客
04-04 2967
首先我们为什么要对一个react环境进行babel配置呢？ react项目中如果不借助脚手架我们要写入一个HTML的话，方法是 import React from 'react' import ReactDom from 'react-dom' const mySpan = React.createElement('span',null, '这厮一个text文本') const div ...
1-1、React环境搭建，以及初识jsx语法。
你华还是你华
04-22 598
大家好，我是Counterrr，生命不息学习不止。 今天第一天学习React，毕竟只掌握Vue我是不满足的，虽然我最近还在学习node，express，但是我还想学Java，php，python，咳咳咳扯远了。 进入主题（Zzz~）： 首先在桌面创建文件夹react-demo，拖到编辑器，VsCode或者WebStorm都可以。我这边使用VsCode。在根目录下创建src文件夹。在根目录下创建i...
使用jsx语法环境搭建
weixin_30467087的博客
05-24 214
1、安装nodejs。nodejs安装后会自带npm，可以用 npm -v 进行查看版本。使用 npm install npm -g 更新文档。 2、创建自己项目，在你的项目路径下执行npm init 来初始化项目，这样项目里就会多以package.json文件。 3、安装babel-cli ，Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。在项目根路径...
react安装及jsx特性
不会脱发的阿银的博客
12-29 683
react基础（一） 文章目录react基础（一）一、react安装与创建二、目录结构三、jsx语法 react是用于构建用户界面的 JavaScript 库。 提示：以下是本篇文章正文内容，下面案例可供参考 一、react安装与创建 在命令行中输入npm i -g create-react-app 来安装脚手架 npm i -g create-react-app 然后进入项目目录，输入create-react-app myreact 来创建react项目，作者创建项目名为myreact，可以自己命名
React 搭建开发环境
weixin_33781606的博客
07-06 348
React 本文记录了本人以及目前团队从无到有使用React的过程，我们将从webpack开始说起，一步一步展现React最基本的开发生态。在这里并不会介绍任何jsx或es6相关的语法，只聚焦于如何使用react生态搭建利于团队协作、有利于提升开发效率的开发环境。 脚手架工具——webpack 工欲善必须利其器，想要高效的开发react，必须保证有一个...
React基本概述、项目创建以及JSX语法
PILIpilipala的博客
12-07 1275
React React 概述React简介项目搭建项目结构说明基本使用JSXJSX简介JSX中的表达式条件渲染循环渲染理解循环CSS样式处理总结 React 概述 React简介 React 是一个 MVC 框架 React 主要是用来构建 UI React 是起源于Facebook的内部项目，用于构建 Instagram 网站，在 2013.05 开源 React 特点： 声明式：使用 React 编写UI界面和写HTML几乎一样 高效： React通过对DOM的模拟，最大限度地减少与DOM的交互
前端——React---将组建单独抽离成.jsx文件
weixin_41933719的博客
08-24 4516
我们可以将index.js文件中的组件抽离出来，每个组件抽离为一个.jsx文件，再从index.js中到进来。 eg. index.js: import React from 'react';//创建组件，虚拟DOM元素，必须这么写 import ReactDOM from 'react-dom';//把创建好的组件和虚拟DOM放到页面上展示的 import Hello from './c...
react常见错误解决
热门推荐
编译的阿喵
06-18 2万+
最近在做react项目的时候遇到了几个报错，这几个报错在react项目还算常见，因此记录下来解决方法。 ’type’ is missing in props validation 报错：type缺少props验证 解决： 1.查看下propTypes是否写成大写了，因为我们引入的时候是大写的，所以很多小伙伴可能直接复制过来就成大写了，也会报错哦 2.新增type: PropTypes.numbe...
搭建react 的react-router-dom v6路由详情
最新发布
05-10
React Router是一个用于建立SPA应用程序的库，它提供了一种将应用程序状态与URL同步的方式。React Router v6是React Router的最新版本，它引入了一些新的概念和语法。 下面是使用React Router v6搭建路由的步骤： 1. 安装React Router v6 使用npm或者yarn安装React Router v6： ``` npm install react-router-dom@next ``` 2. 创建路由 在应用程序的入口文件中，使用BrowserRouter创建一个路由： ```jsx import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); ``` 3. 定义路由 使用Route组件定义路由。Route组件的path属性指定URL的路径，component属性指定该路径对应的组件： ```jsx import { Route } from 'react-router-dom'; function App() { return ( <div> <Route path="/" component={Home} /> <Route path="/about" component={About} /> </div> ); } ``` 在上面的例子中，当URL路径为“/”时，渲染Home组件；当URL路径为“/about”时，渲染About组件。 4. 处理404页面 使用Route组件的exact属性确保路由匹配完全相等的路径。这样可以避免在匹配“/”路径时同时匹配到所有其他路径。 使用Route组件的path属性指定“*”路径，即匹配所有路径的路径。将这个Route组件放在所有其他Route组件的下面，就可以为未匹配到任何路径的URL显示404页面： ```jsx import { Route, Routes } from 'react-router-dom'; function App() { return ( <div> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="*" element={<NotFound />} /> </Routes> </div> ); } ``` 在上面的例子中，当URL路径为任何未匹配到的路径时，渲染NotFound组件。 5. 嵌套路由 使用Routes组件嵌套Route组件，可以创建嵌套路由。在嵌套路由中，父级Route组件的path属性包含所有子级Route组件的path属性的前缀。 ```jsx import { Route, Routes } from 'react-router-dom'; function App() { return ( <div> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />}> <Route path="team" element={<Team />} /> <Route path="history" element={<History />} /> </Route> <Route path="*" element={<NotFound />} /> </Routes> </div> ); } ``` 在上面的例子中，当URL路径为“/about/team”时，渲染Team组件；当URL路径为“/about/history”时，渲染History组件。 React Router v6引入了一些新的语法，例如使用Routes组件代替Router组件，使用element属性代替component属性等。这些语法的目的是让React Router更加简洁易用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值