技术标签: react.js 前端 react学习 javascript
react是一款前端编程框架,是一个用于构建用户界面的 javascript 库,最初起源于 Facebook 的内部项目,开源以后因其便捷的操作迅速成为了前端工程师最得力的工具,React 拥有较高的性能,代码逻辑非常简单,目前在全世界范围内仍是最受欢迎的前端框架。
首先,确保电脑上具备nodejs环境,之后用 win+r 呼出控制台,输入 cmd 命令弹出cmd控制台(小黑框)之后在默认路径输入如下代码
npm i -g create-react-app //全局安装react环境无需选择特定文件夹
安装成功后用cd / 命令跳转到要创建目录的文件夹之下输入如下代码创建一个react项目,我这里安装在了C盘中
cd / //cd+/跳转到电脑c盘
C:\>create-react-app mreact //create-react-app + 文件名 该文件名是react根文件名
创建过程可能会有一点漫长,请耐心等待。
创建完成后cmd控制台会给出如下信息:
然后我们在后面输入 cd /mreact 跳转到我们创建的react目录之下。输入如下代码
C:\>cd mreact //转到mreact文件目录下
C:\mreact>npm start //运行项目
等待控制台处理,处理完之后会自动打开浏览器,为你展现一个react项目。就像图片中一样。
此时可以先把cmd控制台最小化到托盘,但是千万不要关闭,后面还会用到。
好了,我们已经有了一个react脚手架基础了,之后用vs code 找到并打开该文件夹,我们将看到该文件夹下已经有了如下的文件
为了编程的愉快,这里推荐在vs code装载如下的插件
然后我们点开src目录把里面的App.js和App.css里面的内容全选然后删除,再回到浏览器我们就得到了一个空白页面,这样就能构建我们自己的网页了,对了vs code还要做如下设置,适配react的工作环境
做完如上的工作我们已经完成了最基本的环境。
要学会并运用函数组件, 首先我们要先知道jsx是什么,jsx是JavaScript混合xml(html)的语法格式,目的是为了更好的在JavaScript中编写html模板。
jsx的主要特点有以下几点:
1. 有且只有一个根节点
2. class写成classname
3. 在{ }内写JavaScript
4. 数组里面可以直接写html标签
5. 注释用(/**/)
6. 样式可以直接展开
j首先在页面之中导入css样式
import './App.css'; //导入App.css的css文件
App.css内部代码如下
.active{
color: #f70;
}
之后在后面构建一个函数(因为是把js和html结合所以要用函数的方式来表述)最后不要忘了导出该函数
import './App.css';
function App() {
return() //括号内部写主要的页面构造诸如p标签div标签等
}
export default App; //导出该函数
之后定义一个数组这里命名为arr,arr数组内可以写页面元素,并且可以直接通过return输出在页面之上
import './App.css';
function App() {
var arr = [
<h3>ajax</h3>,
<h2>react</h2>,
<p>vue</p>
],
return(
{arr} //此时页面会显示ajax,react,vue三个元素
) //括号内部写主要的页面构造诸如p标签div标签等
}
export default App; //导出该函数
同时我们也可以再定义一个名为syles的对象并在里面写上对应的样式
import './App.css';
function App() {
var arr = [
<h3>ajax</h3>, //元素之间用逗号隔开
<h2>react</h2>,
<p>vue</p>
]
var styles = {
fontSize: "60px", //style样式按照css来写多个字母排列要使用驼峰布局如:backGroundColor
color: "#f70"
}
return (
<div>你好 react
<p className='active'>爱你呦</p> //jsx要求用className绑定类名,
//这里的active是在App.css内定义的
<p>{2 + 3}</p>
{arr}
<p style={styles}>文本</p>//该行文字在页面中会以60px大小和#f70的颜色在页面中显示
</div>
)
}
export default App;
接下来我们来了解一下react里的类组件,清空刚才我们所写的函数组件的内容,写下类组件的基本配置
import React,{Component} from ‘react’ //导入react设置
export default class App extends Compnent{//导出到页面
render(){
return(
<div>
页面主要内容
</div>) //return内部写页面布局 *注意只能有一个div作为根组件
}
}
上面就是我们的主要结构,接下来我们就要写数据进行数据和页面的联携了
import React,{Component} from ‘react’ //导入react设置
export default class App extends Compnent{//导出到页面
constructor(props) {
super(props)
this.state = {
} //state内部写数据
}
render(){
return(
<div>
页面主要内容
</div>) //return内部写页面布局 *注意只能有一个div作为根组件
}
}
之后在return内写组件绑定数据就好了
import React, { Component } from "react";
export default class App extends Component {
constructor(props) {
super(props)
this.state = {
msg: "<b>喜</b>欢", //state中的msg数据
isLog: false, //state中的isLog数据
list: ['vue', 'react', 'jQuery', 'js'] //state中的list数组
}
}
//sayHello(msg="123"){ //函数的第一种写法
// alert(msg)
// }
sayHello = (msg = "默认值") => { //函数的第二种写法
alert(msg)
}
render() {
return (
< div >
{/*更新数据 setState*/}
<button onClick={() => {
this.setState({ isLog: !this.state.isLog }, () => {
console.log('完成');
})
}}>切换</button> <br />
{/*事件*/}
<button onClick={this.sayHello.bind(this, '中国人不骗中国人')}>你好-传参2</button>
<button onClick={() => { this.sayHello('参数1') }}>你好-传参</button>
<button onClick={this.sayHello}>你好-1</button>
<button onClick={() => alert('2020')}>你好</button>
{/*列表渲染*/}
{this.state.list.map(item => <p key={item}>{item} </p>)}
{/*文本渲染*/}
{this.state.msg}
<div dangerouslySetInnerHTML={
{ __html: this.state.msg }}></div>
{/*条件渲染*/}
{this.state.isLog ? <p>欢迎</p> : <p>请登录</p>}
{this.state.isLog && <p>wink</p>}
</div >
)
}
}
这些就是react最基本的操作和页面构架啦。
文章浏览阅读2.1k次。项目最近做任务排产,需要绘画甘特图,并且每两份一组,做了一个JQuery快速做了POC,实现了大部分功能,后来持续开发,做到了划定当前时间,任务多了后固定左侧列和顶部坐标轴行等等。分享博客的话就简单的分享一下做的POC吧。实现的初步效果如下分析:左侧的轴样式美观程度比较高,且需要分组,分类,我初次尝试echarts分组,样式自定义程度不好,距离还得xy算偏移量左侧使用css 右侧使用echarts,则会出现图表和css自定义的样式行对不上等等,分类随时还需要空一行每个不同的生产内容颜色区块._echarts 甘特图分层级
文章浏览阅读231次。前文我们谈到了,企业业务流程的规范性,决定了企业经营相关信息、数据获取的准确性和及时性,很多时候,财务人员对流程的规范性、完整性感知更深刻,因此企业的业务流程建设,应该要让财务参与进来,一方面:财务可以从信息流、资金流、物流协同,及企业成本和收入的角度对流程进行审视。财务由被动转为主动,并不能仅仅是财务的主观愿望,而应该是公司管理的主动安排,例如:规定每个期间财务部要对公司的运营部门做《评价报告》,该报告直接交给总经理,报告内容,侧重在过程指标的展示说明,这也是体现财务分析能力的关键!_业务经营支持与赋能
文章浏览阅读6.5k次。出现这个问题好像是因为硬盘中有遗留的raid信息导致。在安装选项中添加 nodmraid参数,再启动进行安装就好了如果不会添加参数可以参考这篇文章:安装ubuntu时黑屏三种解决办法就和添加 nomodeset参数一样转载于:https://www.cnblogs.com/xiyu714/p/10125984.html..._ubi-partman crashed
文章浏览阅读2.3w次。# ifconfig 提示命令不存在 使用 # /sbin/ifconfig 即可 原因: 系统默认的环境变量设置不对 在 普通用户 和root用户下分别执行echo $PATH,PATH里少了四个地址:/sbin:/usr/sbin:/usr/local/sbin:/usr/kerberos/sbin 而,ifconfig恰恰就在/sbin里面。_linux系统ifconfig找不到?
文章浏览阅读4.2k次。Android开发工具箱大概在版本2.2.0(2021-06-10)就已经支持查看鸿蒙系统信息以及鸿蒙应用信息了。这里我讲一下Android开发工具箱是如何在Android应用中(APK)获取鸿蒙应用Ability信息(类似于Android应用的四大组件信息)Android开发工具箱可在应用宝、酷安下载,微信公众号:Android开发工具箱https://www.coolapk.com/apk/com.su.assistant.proAndroid中,我们获取应用列表之后,再获取应用的P_getbundleinfo
文章浏览阅读225次。使用单独线程控制modbus收发数据,信号槽交互UI和线程间的数据,信号槽自定义结构体发送,废话不多说,上代码。//如下自定义结构体,方便信号槽发送。欢迎加入QQ群538536725灌水。//最后是qt pro配置文件。//如下主UI头文件。_qt头文件没有qmodbus
文章浏览阅读3.2k次。// 动态修改title uni.setNavigationBarTitle({ title:title })_uniapp更改页面名称
文章浏览阅读426次,点赞12次,收藏5次。给定一组有序的数据点(存在很多噪声),求解一条B样条曲线逼近于该组数据点,每个数据点到曲线的最短距离小于设定的容差TOL相比于传统的三次样条逼近算法,本算法1. 能处理带噪声的数据集,曲线更加光滑2. 所需的控制点更少
文章浏览阅读106次。效果:http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/特性支持点击label实现checkbox组选择.头部选项,如全选/ 取消全选 /关闭功能.支持键盘选择.支持5种不同的事件回调函数.以列表方式显示选中项目,并且可以设置最大显示值.方便改变位置,渐变速度,滚动..._multiselect 多级 多选插件 checkbox
文章浏览阅读1.4k次。一、Lombok简介官方介绍Project Lombok is a java library that automatically plugs into your editor and build tools, spicing up your java.Never write another getter or equals method again, with one annotation your class has a fully featured builder, Automate your_lombok的优缺点
文章浏览阅读204次。前端进阶之路思维导图地址https://zh.javascript.info/红宝书:JavaScript高级程序设计绿宝书:JavaScript语言精髓与编程实践黄宝书:你不知道的JavaScript(上/中)蓝宝书:JavaScript设计模式与开发实践react工程师修炼指南JS DOM编程艺术(第2版):看红宝书的前置书,因为比较简单min-vue源码didact源码算法第四版http权威指南迷你书籍: DOM启蒙Ja
文章浏览阅读397次。packagecom.yellow.cas;importjava.util.concurrent.TimeUnit;importjava.util.concurrent.atomic.AtomicInteger;importjava.util.concurrent.atomic.AtomicStampedReference;public classABATest3 { publi..._java 锁 aba