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

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • armv7和arm64区别(armv7s)

    目前ios的指令集有以下几种:armv6iPhoneiPhone2iPhone3G第一代和第二代iPodToucharmv7iPhone4iPhone4Sarmv7siPhone5iPhone5Carm64iPhone5SiPhone6iPhone6+================================================…

    2022年4月11日
    92
  • VS2005清理VAssist插件「建议收藏」

    VS2005清理VAssist插件「建议收藏」VAssist卸载不彻底的情况下,导致注册表残留,VS2005总是去加载VAssist插件。通过搜索注册表里面的Addins来手动删除[HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\8.0\Addins]…

    2022年9月23日
    6
  • html怎么使表格居中,html怎么使表格居中[通俗易懂]

    html怎么使表格居中,html怎么使表格居中[通俗易懂]回答:HTML中两个表格间的距离调整有两种适合微调的办法:1.设置第一个tbale的margin-bottom属性。例如:表示table表格底部保持100px间距。2.设置第二个tbale的margin-top属性。例如:表示table表格顶部保持100px间距。扩展知识margin属性可以单独改变元素(元素可以是表格或者DIV)的上,下,左,右边距。也可以一次改变所有的属性。margin属性…

    2026年1月24日
    7
  • STUN协议解释[通俗易懂]

    STUN协议解释[通俗易懂]最近工作中要用到stun,故学习了一下stun协议的知识。中文的文档没找到讲的比较好的,所以只能自己翻译了,官方文档太长就找了个谷歌排名第一的文章翻译一下。机翻+人翻,原文地址如下,在学习过程中还发现了原文作者的一个错误。。。应该是他错了。https://www.3cx.com/blog/voip-howto/stun-details/https://www.ietf.org/rfc/rf…

    2022年7月17日
    23
  • 树莓派自动连接蓝牙_树莓派能搜到wifi但是连不上

    树莓派自动连接蓝牙_树莓派能搜到wifi但是连不上将USB无线网卡插入树莓派任一USB接口,插上网线,接通电源;在个人电脑上通过ssh连接树莓派,默认帐号是pi,默认密码是raspberry(如何通过ssh连接树莓派,请自行网上查找,当然如果树莓派已

    2022年8月5日
    5
  • java1.8垃圾回收机制_JAVA垃圾回收机制

    java1.8垃圾回收机制_JAVA垃圾回收机制目录:什么是垃圾怎么判定垃圾什么时候回收垃圾怎么回收垃圾回收器介绍1.什么是垃圾在JVM中,程序计数器、虚拟机栈、本地方法栈都是随线程生而生,随线程灭而灭(不需要管理);栈帧随着方法的进入和退出做入栈和出栈操作,实现了自动的内存清理(不需要管理);常说的垃圾回收主要集中在堆和方法区,这部分内存是随着程序运行动态分配的(回收对象,常量,类)。2.怎么判定垃圾2.1对象:产生位置:堆Java的自动内…

    2022年10月13日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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