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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 2014年度个人年终工作总结

    2014年度个人年终工作总结2014年度个人年终工作总结2014年度过去了,迎来了新的2015年度,总结在过去的一年中的得失,是为了在新的一年中创建更好的工作秩序。2014年的工作主要围绕以下三个技术点进行的:一、delph

    2022年7月4日
    21
  • navicat premium激活码【2021最新】

    (navicat premium激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

    2022年3月26日
    230
  • redis可视化工具使用_redis图形化

    redis可视化工具使用_redis图形化启动redis服务执行命令:redis-server.exe建立连接redis-cli.exe-h127.0.0.1-p6379搞一条件数据key1–>myRedis下载redisClient客户端只有一个exe文件,不用安装,直接打开就行添加连接后可以看到一共有16个库,刚才添加的数据已经在缓存数据库里边了done!!!…

    2022年10月10日
    0
  • Python爬虫:URL管理器及其实现方式、网页下载器、网页解析器原理及其实现原理!

    Python爬虫:URL管理器及其实现方式、网页下载器、网页解析器原理及其实现原理!Python爬虫之URL管理器:Python爬虫:URL管理器实现方式:Python爬虫之网页下载器:urllib2实现网页下载器的三种方法:具体代码:              Python网页解析器:…

    2022年5月2日
    80
  • 运营中心组织架构_微服务系统架构介绍

    运营中心组织架构_微服务系统架构介绍X:一个服务器不行就多来几个服务器Y:一个项目切成很多部分Z:将数据进行切分,使用不同的数据库SpringCloud配置注册中心:设置配置文件,首先改为yml文件开启后访问localhost:8761在Application里面就可以看到配置的注册中心了。但是在实际操作中,往往不用显示这个注册中心,所以在配置的时候加上一句话:再次开启,就没有了。…

    2022年8月21日
    5
  • MPLS 虚拟专用网 实验配置和抓包

    MPLS 虚拟专用网 实验配置和抓包

    2021年4月14日
    188

发表回复

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

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