佛山专业网站营销,辽宁鞍山最新通知,用什么技术做网站,做h5的软件有哪些一、环境安装 第一种#xff1a;使用原生搭建(可以从国内下载配置镜像、也可以从国外下载) 指令#xff1a;1.国内下载#xff1a;#xff08;1#xff1a;npm config set registry https://r.npm.taobao.org// #xff08;2#xff1a;npm install -g create-react-app…一、环境安装 第一种使用原生搭建(可以从国内下载配置镜像、也可以从国外下载) 指令1.国内下载1npm config set registry https://r.npm.taobao.org// 2npm install -g create-react-app:全局安装react脚手架 3create-react-app 项目名创建项目 4cd 项目名进入项目 5npm run start启动项目 2.国外下载执行2-5步骤即可下载速度较慢 第二种方式用vite搭建脚手架速度较快建议使用 指令1.npm init vitelatest初始化一个新项目 2编辑项目名选择react选择javascript、tscript等等按需求选择 3cd 项目名进入该项目 4npm init:初始化一个新的 Node.js 项目 (5:npm run dev:启动项目
二、JSX相关语法
src文件夹下的main.jsx文件是整个项目的入口文件不可移除其他的按自己需求保留
JSX完整写法JavaScript XML(标记语言)通俗的讲是js语言里面可以插入标签 XML和HTML的区别前者不能直接引入外部文件后者可以引入外部文件js、ts、css等
1.组件创建组件可以分为三种纯组件、函数组件、类组件 1.1纯组件通过创建jsx对象包含了多个元素的div标签三个div标签。可以将jsx对象当作变量使用在标签的括号中
import React from react
import ReactDOM from react-dom/clientlet com divh1这是纯组件部分呀/h1div纯组件/divdiv函数组件/divdiv类组件/div
/div
//render里面写入com这个jsx对象即可将其里面的元素展现到页面中去
ReactDOM.createRoot(document.getElementById(root)).render(com) 1.2函数组件通过声明一个函数来创建组件
import React from react
import ReactDOM from react-dom/client
// 声明一个函数
function Hanshu(ARG) {return divh1这是通过函数来创建的组件呀/h1div在main.jsx文件里面操作的嘞/div/div
}
// 11行和12行以及render中的Hanshu等价
let res Hanshu/Hanshu
let res2 Hanshu()ReactDOM.createRoot(document.getElementById(root)).render(Hanshu())1.3通过类来创建组件
import React from react
import ReactDOM from react-dom/client
//创建一个Type类并继承React的组件部分是为了继承它的响应式数据功能
class Type extends React.Component {render() {return divh1这是通过class类来创建的组件呀/h1div嘿嘿黑/div/div}
}
// 只能通过这个来实现咯
let res Type/Type
ReactDOM.createRoot(document.getElementById(root)).render(res)2.jsx插值表达式的使用途径 1变量直接当作变量通过{}来使用
import { useState } from react
import ./test.css
function test() {// 当作变量来使用let bianliang 120let arr [box1, box2, jack, 22岁了, 今天是他生日哦]let obj { name: 小红, age: 22, sex: 女, job: student }return (div classNamediv变量使用{bianliang}/divdiv访问数组中的成员::{arr[4]}/divdiv访问对象中的成员::{obj.name}/div/div)
}
export default test 2对象数组成员访问
import { useState } from react
import ./test.css
function test() {let arr [box1, box2, jack, 22岁了, 今天是他生日哦]let obj { name: 小红, age: 22, sex: 女, job: student }return (div classNamediv访问数组中的成员::{arr[4]}/divdiv访问对象中的成员::{obj.name}/div/div)
}
export default test 3js运算表达式
import { useState } from react
import ./test.css
function test() {let isout yeslet count 22// 定义一个变量marrylet ismarry truereturn (div className{/*相当于vue中的v-fi 如果isout的结果为yes则显示”不出去了吧“否则显示”出去呀散步不“ */}div{(isout yes) ? 不出去了吧 : 出去呀散步不}/div{/* 可以将前面的变量进行加减乘除计算 */}divcount21的结果为{count 21}/div{/* 判断marry是否为true满足则显示后面的”已经结婚了哦“信息 判断为false则不显示*/}div{ismarry 逻辑与的部分}/div{/* 若marry判断为false则显示后面的语句若为true则显示前面的语句 */}div{ismarry || 逻辑或的部分}/div/div)
}
export default test 4函数调用
import { useState } from react
import ./test.css
function test() {function diaoyong() {console.log(调用了函数名为diaoyong);}return (// 直接在标签中将diaoyong函数当作变量使用div classNamefa111{diaoyong()}/div)
}
export default test 5jsx对象给变量赋标签组件
import { useState } from react
import ./test.css
function test() {// 定义一个jsx对象包含了多个元素的div标签h1,h2,h3,p标签// 可以将jsx对象当作变量使用在标签的括号中let jsxobj divh1hello/h1h2你好/h2h3晚上老好了/h3p嘿嘿黑/p/divreturn (// 将jsxobj这个对象显示到页面中去div classNamefa{jsxobj}/div)
}
export default test 6插值{}可以使用途径 6.1数据循环渲染
import { useState } from react
function test() {// 想要将arr数组里面的元素遍历装到a标签中去// 第一种写法使用for循环将其取到的元素当作变量放到dive标签中去再将遍历的得到的div标签添加到新的数组中去let arr [你好, react, 很高兴认识您, 我相信接下来的时间, 我们会相处的很愉快的]let newarr []for (let i 0; i arr.length; i) {newarr.push(div key{i}{arr[i]}/div)}return (div{newarr}{/* 第二种(最常用)直接在标签中使用map函数 ,将各个元素取出来放到div标签中当作变量使用*/}div {arr.map((el, index) div key{index}{el}/div)}/div/div)
}
export default test小案例数组中的元素是对象将每个元素都显示在页面上
import { useState } from react
import ./test.css
function test() {// 将数组arr里面的数据取出来展现到页面上let arr [{ title: 电脑, discrbe: 真的不错, price: 1231元, location: 四川, comment: 发货快是正品下次还来 },{ title: 手机, discrbe: 正品直发, price: 2313元, location: 广东 },{ title: 电话手表, discrbe: 可以聊天的神奇软件, price: 1231元, location: 广东 }]return (// 用map函数将arr里面的元素取出来然后通过点语法来取元素中的对象div classNamefa{arr.map((el, index) div classNamebig key{index}h4{el.title}/h4div{el.discrbe}/divdiv{el.price}/divdiv{el.comment}/div/div)}/div)
}
export default test 6.2标签事件(以点击事件为例)
import { useState } from react
function test() {// 定义一个函数dianj没传参数function dianji() {console.log(触发了点击事件);}function canshu() {console.log(触发了传递参数的函数);}return (div{/* 点击事件操作的函数不能加括号加了括号是不用点击就立即执行 */}div classNamebox onClick{dianji}点击打印/divbutton onClick{canshu}传参数事件/button/div)
}
export default test6.3标签的属性className,style,src,href..... 6.3.1className: 若只想一个类名需要在前面声明一个对象obj{one1”one“,one2:two,one3:three} 格式className{obj.one1} 若想要给一个标签多个类名可以声明一个数组变量arr【box1,box2,box3】 className{arr.join( )} 也可以直接claName{【box1,box2,box3,box4】.join( )} 6.3.2style:分为全局样式和局部样式 全局样式可以直接在main.jsx中引入作为全局样式
/*.index.css文件中为 全局样式 */
.name {width: 100px;height: 100px;border: 1px solid black;
}//app.jsx文件中import { useState } from react
// 引入组件Box
import Box from ./jubu.jsx
function App() {return (divdiv classNamename全局样式/divBox/Box/div)
}export default App局部样式当项目中有几个组件组件中的类名重复时则显示的是后面执行的那个样式若想要显示各自的样式需要将各自的样式设置为局部样式样式文件后缀名修改为module.css
//jubu.jsx文件中import { useState } from react
// 引入局部样式
import yangshi from ./jubu.module.css
function jubu() {return (div className{yangshi.name}局部样式的效果/div)
}
export default jubu//jubu.module.css文件中
/* 局部样式 */
.name {width: 100px;height: 50px;background-color: yellow;border-radius: 10px;
} 6.3.3src和href绑定的是一个地址或网址
import { useState } from react
function test() {// 点击跳转到百度首页let tiaozhuan https://www.baidu.com// 图片显示的网络地址也可以是本地地址let tupian https://tse1-mm.cn.bing.net/th/id/OIP-C.De4iKAMeTvWwPQxXNK74ZgHaE8?w281h187c7r0o5pid1.7return (diva href{tiaozhuan}点击跳转到百度首页/aimg src{tupian} alt //div)
}export default test
