初识React之组件

最新推荐文章于 2024-07-15 23:28:46 发布
最新推荐文章于 2024-07-15 23:28:46 发布
阅读量89 收藏
点赞数
分类专栏： React Native 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_shine93/article/details/106032610
版权
这篇博客介绍了React Native的基础知识，通过四个逐步进阶的demo，包括打印Hello React、定义组件类、组件样式以及复合组件，展示了如何在移动端进行跨平台开发。在第一个demo中，讲解了ReactDOM.render的基本用法。后续的demo详细阐述了组件的创建和样式设置，强调了React中样式的特性和与HTML的不同。最后，讨论了如何组合组件并传递数据。
摘要由CSDN通过智能技术生成

移动端跨平台开发，从零开始学习React Native。

第一个demo：打印Hello React

一、 知识点

  1. 需要将react的框架导入到项目中，注意browser.min.js也要导入
  2. type=“text/babel”
  3. ReactDOM.render是React的最基本方法用于将模板转为HTML语言，并插入指定的DOM节点。ReactDOM.render(template,targetDOM),该方法接收两个参数：第一个是创建的模板，多个dom元素外层需使用一个标签进行包裹，如<div>；第二个参数是插入该模板的目标位置。
  4. 传入变量的话用{}包裹

二、demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="react/browser.min.js"></script>

</head>
<body>
<div id="Hello"></div>

</body>


<script type="text/babel">
    var hName = "Hello React!";
    ReactDOM.render(
            //死数据
//            <h1>Hello React!</h1>,
// 变量用{}包裹
            <h1>{hName}</h1>,
            document.getElementById('Hello')
    )
</script>

</html>

第二个demo：定义组件类

一、知识点

  1. 定义组件用React.createClass
  2. 用this.props来做简单的数据传递
  3. 组件第一个字母大写采用驼峰式命名

二、demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="react/browser.min.js"></script>

</head>
<body>
<div id="Hello"></div>

</body>

<script type="text/babel">

    //定义一个HelloMessage组件
    var HelloMessage = React.createClass({
        render: function(){
            return <h1>Hello {this.props.hName}!</h1>;
        }
    });

    ReactDOM.render(
            <HelloMessage hName="React"/>,
            document.getElementById('Hello')
    )
</script>

</html>

第三个demo：组件的样式

一、知识点

  1. 三种样式：内联样式、对象样式、选择器样式。内联样式和对象样式类似，选择器样式和html相似
  2. 注意react样式和html样式的区别：
  • html5以;结尾，React以,结尾
  • HTML5中key、value都不加引号；React属于JavaScript对象，key的名字不能出现-，需要使用驼峰式命名。如果value为字符串，需要加引号
  • HTML5中，value如果是数字，需要带单位，React中不需要带单位
  1. 调用选择器样式，不能直接定义class而要用className，因为class是javascript中的保留字

二、demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="react/browser.min.js"></script>

    <!-- 选择器样式-->
    <style>
        .pStyle{
            font-size:15px;
            color: blue;
        }
    </style>


</head>
<body>
<div id="Hello"></div>

</body>


<script type="text/babel">
    //对象样式
    var hStyle = {
        backgroundColor:"gray",
        fontSize:18,
        color:"red"
    };

    var ShowMessage = React.createClass({
       render:function(){
          return(
           //内联样式
           <div style={{backgroundColor:"yellow",borderColor:"black",borderWidth:5,borderStyle:"solid"}}>
                <h1 style={hStyle}>{this.props.hName}</h1>
                <p className="pStyle">{this.props.pName}</p>
           </div>
           );
       }
    });

    ReactDOM.render(
            <ShowMessage hName="您好" pName="React" />,
            document.getElementById('Hello')
    )
</script>

</html>

第四个demo：复合组件

一、知识点

  1. 简单的将两个组件组合在一起。（数据其实还是死的，怎么传活数据需要用props传值，下一篇介绍）

二、demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="react/browser.min.js"></script>

</head>
<body>
<div id="Hello"></div>

</body>


<script type="text/babel">

    //功能：输出网站的名字和网址，网址可点击
    var WebName = React.createClass({
       render:function(){
           return <h1>百度网址</h1>;
       }
    });

    var WebUrl = React.createClass({
       render:function(){
           return <a href="http://www.baidu.com">http://www.baidu.com</a>;
       }
    });

    var WebShow = React.createClass({
       render:function(){
           return (
                   <div>
                           <WebName />
                           <WebUrl />
                   </div>
           );
       }
    });

    ReactDOM.render(
            <WebShow />,
            document.getElementById('Hello')
    )
</script>

</html>
懒得减肥的雪胖子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React 组件介绍
qiqiyiyi_的博客
12-20 384
React 组件 props 属性和 state 属性       内容大纲：                      1、Re...
React函数式组件、hooks及初识路由(三)
L_u_c_k_y_m_a_n的博客
07-29 666
一、前言         昨天由于有一些事情耽搁,没有学习新的 react 以及发布博客. 而今天呢,这篇内容会分享类组件、函数式组件、hooks的一些方法以及初识 react 路由.接下来我们学习吧! 二、children         组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容  &nbsp
React组件
minihoop的博客
10-24 344
生命周期： 组件本质上是状态机，输入确定，输出一定确定。 状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应 可以用事件的思路来理解状态 初始化对应的回调函数： getDefaultProps    //第一个实例被初始化时调用,只调用一次，实例之间共享引用 getInitialState     //初始化每个实例特有的状态 componentWillM
React组件三大类：类组件、函数组件、高阶组件
最新发布
你若盛开，清风自来
07-15 1319
本文将详细介绍React中的类组件、函数组件和高阶组件，帮助读者理解它们的概念、使用场景和优势，以便在实际项目中合理选择和使用。类组件、函数组件和高阶组件是React中三种常见的组件类型，它们各自具有独特的特点和优势。掌握这三种组件类型的使用方法，可以根据实际需求在项目中合理选择和使用。
Web前端-初识React框架
qq_25592087的博客
11-07 574
官方说明：用于构建用户界面的 JavaScript 库。
react初识
06-10
本文将从React的基本概念、核心特性、组件化开发以及源码解析等角度，为你提供一个全面而深入的React学习之旅。 一、React基础 React是一个用于构建用户界面的库，主要关注视图层。它采用声明式编程方式，使得...
初识React生命周期&钩子函数
Y18356309212的博客
04-18 269
简介 React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，挂载、更新、卸载、错误处理，一般经常用到的就是前三个阶段。后面一个阶段用的比较少。 一. 挂载阶段 1. constructor() （常用钩子函数） 这个钩子函数一般都是用来进行初始化状态和进行this绑定。但是在执行这个钩子函数之前，要在这个钩子函数的最上面加上一句代码supe...
First-React:初识的人React
05-08
4. **生命周期方法**: React组件有多个生命周期方法，如`componentDidMount`、`shouldComponentUpdate`和`componentDidUpdate`，这些方法在组件的不同阶段被调用，帮助管理组件的状态变化和渲染。 5. **虚拟DOM**: ...
React的组件
LXY224的博客
09-21 673
一、组件的几种创建方式 对于React来说组件Component算是它的核心之一。用了React的时间也不短了，记录一下以便以后翻看 1 createClass 用ES5的方法React.createClass来创建一个组件 import React from 'react'; class Test = React.createClass({ render(){ ...
【React】React 组件
Jessieeeeeee的博客
06-24 1437
React 组件
组件(react)
0.0 的博客
01-20 407
React 通过组件的思想，将应用界面拆分成一个个可复用的模块，每一个模块就是一个 React 组件。一个 React 应用由若干组件组合而成，一个组件由若干个 React 元素组合而成，一个复杂组件也可以由若干简单组件组合而成。 组件式开发比模块化开发将应用界面拆分的更细，更高效的提升了代码的复用性。 一、组件的分类 React 中组件可以分为两类： 函数组件：以 JS 中函数的形式设置组件，函数名即为组件名； 类组件：以 ES6 中 class 的形式设置组件，类名即为组件名； 1、创建组件文件 通常我
React类组件
qq_51130780的博客
07-06 948
类组件的使用
React 组件（函数、类组件）
YuLong的博客
09-07 744
文章目录组件与模块概念React 组件介绍 组件与模块概念 模块： 理解：向外提供特定功能的js程序, 一般就是一个js文件 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。 作用：复用js, 简化js的编写, 提高js运行效率 组件： 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) 为什么要用组件： 一个界面的功能更复杂 作用：复用编码, 简化项目编码, 提高运行效率 模块化： 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用 组件化：
[React]关于React的组件
梦想成为全栈的切图仔
09-16 1480
在react中，我们可以这样认为一切皆组件。我们的项目就是基于组件。class 是类组件，function 则为函数式组件。本章我们就一起来仔仔细细的玩懂React的组件。
React组件（入门）
weixin_57844432的博客
09-29 689
简单理解为一个项目就像一个房子，由很多块砖垒起，这些砖块就可以称为组件。
react自定义组件
09-21
React自定义组件是在React中开发应用程序时创建的一种可重复使用的代码块。可以通过继承React.Component类或使用函数来声明自定义组件。有三种方式可以声明React自定义组件：类式声明组件、函数式声明组件和使用类式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值