react.js

简介: react.js

1.react.js项目的环境搭建

(1).在node.js官网下载一个node.js的xmi文件运行安装好之后就可以进行第二步了

(2)打开VS code  选择一个文件夹目录或者新建一个文件目录作为工作空间,鼠标选中文件目录,在菜单栏找到Terminal新建一个终端界面(New Terminal)

image.png

(3)安装npm 依赖:npm install

(4)在终端里使用cd 命令进入工作空间,然后使用npx  create-react-app  test  命令创建一个项目名为test的项目(test只是举例)

(5)继续使用cd命令进入项目文件夹下(test),然后使用npm  start  命令启动项目,在浏览器的地址栏中输入:localhost:3000 按 enter键之后看到以下图标即代表项目启动成功

image.png

2.组件

注意: 组件名称必须以大写字母开头。React会将以小写字母开头的组件视为原生DOM标签。例如,<div/> 代表HTMLdiv标签,而 <Welcome/> 则代表一个组件,并且需在作用域内使用 Welcome。你可以在深入JSX中了解更多关于此规范的原因。

(1)函数组件

创建一个Greet.js文件

import React from 'react'//写好函数会自动引入importfunctionGreet(props) {
return<h1>Hello, {props.name}</h1>;
}

App.js文件中:可以直接使用自定义的标签

import {Greetfrom './components/Greet'function App() {
  return (
    <div className="App">      <Greet>此标签和html标签一样可以使用</Greet>    </div>  );
}
export default App;

2)类(class)组件

创建一个Welcome.js文件

import React, {Componentfrom "react";
class Welcome extends Component{
    render(){
        return <h1>Class component        <h2>Welcome{this.props.namea.k.a {this.props.heroName}</h2></h1>    }
}
export default Welcome;

App.js文件中:可以直接使用自定义的标签

import Welcome from "./components/Welcome" 
function App() {
  return (
    <div className="App">      <Greet name="Bruce" heroName="Batman">        <p>This is children props</p>      </Greet>      <Greet name="Clark" heroName="Superman">        <button>Action</button>      </Greet>      <Greet name="Danan" heroName= "Wonder Woman"></Greet>      <Welcome name="Bruce" heroName="Batman"></Welcome>      <Welcome name="Clark" heroName="Superman"></Welcome>      <Welcome name="Danan" heroName="Wonder Woman"></Welcome>    </div>  );
}
export default App;

3)组合组件

(4)提取组件

相关文章
|
机器学习/深度学习 搜索推荐 TensorFlow
LiRank: LinkedIn在2月新发布的大规模在线排名模型
LiRank是LinkedIn在2月份刚刚发布的论文,它结合了最先进的建模架构和优化技术,包括残差DCN、密集门控模块和Transformers。它引入了新的校准方法,并使用基于深度学习的探索/利用策略来优化模型,并且通过压缩技术,如量化和词表压缩,实现了高效部署。
125 3
|
人工智能 自动驾驶 安全
2024 年,大型语言模型可能向大型视觉模型的转变
【1月更文挑战第17天】2024 年,大型语言模型可能向大型视觉模型的转变
156 2
2024 年,大型语言模型可能向大型视觉模型的转变
|
算法 Go
用golang语言刷leetcode题目集锦
用golang语言刷leetcode题目集锦
|
关系型数据库 MySQL 数据库
史上最全的MySQL性能手册(优化+SQL+并发+数据库)
史上最全的MySQL性能手册(优化+SQL+并发+数据库)
|
开发者
钉钉云课堂可以学习开发者学堂精品技术课啦!
想利用碎片化学习但苦于设备不方便?阿里云开发者学堂为方便开发者,带着钉钉云课堂来啦!钉钉上就能查看开发者学堂精品技术课!随时随地想学就学!
钉钉云课堂可以学习开发者学堂精品技术课啦!
|
缓存 编解码 人工智能
移动端UI自动化过程中的难点及应对策略
在之前的文章《自动化质量评估维度》中,我们探讨了衡量自动化稳定性的误报率指标,今天重点针对移动端UI自动化过程中导致误报的几个难点进行展开分析并给出相应的解决方案。
786 1
|
存储 运维 安全
RPM 包管理 - 2| 学习笔记
快速学习RPM 包管理 - 2。
RPM 包管理 - 2| 学习笔记
|
弹性计算 数据安全/隐私保护
阿里云服务器使用感想
第一次接触云服务器,分享一下我的使用感受。
|
存储 弹性计算 缓存
阿里云共享标准型S6服务器规格配置性能应用环境详细介绍
阿里云共享标准型S6服务器是阿里云推出的最新一代共享型云服务器实例。
1794 0
阿里云共享标准型S6服务器规格配置性能应用环境详细介绍