React入门小记

React入门小记

一、创建react项目

1.安装node npm、并检验是否安装成功(node -v、npm -v)

2.npx create-react-app small-app(创建react项目工程)

cd small-app

npm run start

二、render函数

每个组件必须返回一个render函数,这个 render 方法必须要返回一个 JSX 元素。 必须要用一个外层的 JSX 元素把所有内容包裹起来,返回并列多个 JSX 元素是不合法的.

三、事件方法

handClickAction(参数){具体实现过程}
复制代码

四、map遍历数组

要实现如下图功能:

React是操作数据的、不需要关心DOM结构,只需要循环遍历数组、返回标签即可。

const list = []
list.map((item,index)=>{
    return(<Li key={index}>{item}</Li>)
})

复制代码

五、css样式写法

1.本文件中
<input style={inputStyle}></input>
const  inputStyle =
{
    marginLeft:'15px',
    marginTop:'10px',
    width:'200px',
    height:'30px',
}

2.css文件中
.MyStyle{
  text-align: left;
  font-size: 18px;
  color: red;
  background-color: lightgoldenrodyellow;
}
采用<input className='Mystyle'></input>

复制代码

转载于:https://juejin.im/post/5cb966b2f265da03ba0e276e

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100975.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • C#生成ANSI编码格式的文件[通俗易懂]

    C#生成ANSI编码格式的文件[通俗易懂]使用GB2312以代表ANSI编码stringfileName=”D:\\1234.txt”;StreamWritersw=newStreamWriter(fileName,false,Encoding.GetEncoding(“GB2312”));sw.WriteLine(“col1,col2,col3”);sw.WriteLine(“繁體中文,2,3”);sw.WriteLine(“简体中文,2,3”);sw.WriteLine(“English,2,3”);sw.C

  • 右下面弹出框实现代码

    右下面弹出框实现代码

  • linux smartctl 命令,Smartctl 命令查看硬盘详细信息

    linux smartctl 命令,Smartctl 命令查看硬盘详细信息Smartctl命令查看硬盘详细信息(2011-08-3014:21:41)标签:linux硬盘信息使用时间杂谈1.1什么是Smartmontools?Smartmontools是一种硬盘检测工具,通过控制和管理硬盘的SMART(SelfMonitoringAnalysisandReportingTechnology,自动检测分析及报告技术)技术来实现的,SMART技术可以对硬盘的磁头单…

  • 3.15曝光“山寨”杀毒软件“杀毒三宗罪”

    3.15曝光“山寨”杀毒软件“杀毒三宗罪”“山寨”版杀毒软件,不同于其他山寨手机等产品。对于山寨手机,除了需要用户忍受哇哇叫的刺耳铃声,最起码山寨手机在通讯及其他娱乐商务功能上,都可以满足用户需求,不会在产品功效上严重侵犯消费者权益。而山寨

  • Javaweb 聊天室

    Javaweb 聊天室Javaweb聊天室前言java课程结束了之后,老师要求我们用java做一个关于聊天室的课程设计,于是我就想做一个web应用,在这里只是纯分享,如果想要源码的,可以在评论里说。一、实验目的做一个Javaweb聊天室系统1.实现登录功能2.注册功能3.发送聊天内容功能4.接收消息5…

  • UE4投影矩阵[通俗易懂]

    UE4投影矩阵[通俗易懂]UE4投影矩阵正交投影classFOrthoMatrix :publicFMatrix{public: /** *Constructor * *@paramWidthviewspacewidth *@paramHeightviewspaceheight *@paramZScalescaleintheZaxis *@paramZOffsetoffsetintheZaxis */ FOrthoMatrix(flo

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号