React定义组件

最新推荐文章于 2024-09-19 10:51:14 发布

a821814989

最新推荐文章于 2024-09-19 10:51:14 发布

阅读量428

点赞数 1

分类专栏： React Native学习笔记文章标签： React组件

本文链接：https://blog.youkuaiyun.com/a821814989/article/details/53810927

版权

React Native学习笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的React项目搭建过程，包括工程配置、基本文件结构及第一个React组件的编写。通过实例演示了如何创建并渲染一个React组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定义一个工程，名字为Component，然后将build文件夹及模板文件复制到工程文件夹中，
2、将工程文件夹添加到编辑器中，并打开Index.html
3、编写代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <!--react.js是React的核心库-->
    <script src="./build/react.js" charset="utf-8"></script>
    <!--react-dom.js的作用是提供与DOM相关的功能-->
    <script src="./build/react-dom.js" charset="utf-8"></script>
    <!--browser.min.js的作用是JSX语法转换成JavaScript语法-->
    <script src="./build/browser.min.js" charset="utf-8"></script>

    <style>
      .pStyle{
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <!--React渲染的模板内容会插入到这个DOM节点中，也可以理解为一个容器-->
    <div id="container">

    </div>
  </body>
  <!--在React开发中，使用JSX,跟JavaScript不兼容，所以在使用JSX的地方需要设置type="text/babel"-->
  <!--babel是一个转换编译器，可以将ES6转成可以在浏览器中运行的代码-->
  <script type="text/babel">

  //在此处编写React代码

  /**
    创建一个组件类，用于输出Hello React

    1、React中创建的组件类以大写字母开头，遵循驼峰命名法
    2、在React中使用React.createClass方法创建一个组件类
    3、核心代码：每个组件类都必须实现自己的render方法。输出定义好的组件模板。
       而且还有返回值，返回值：可以为null、false、组件模板
    4、注意：组件类只能包含一个顶层标签
  **/

    var HelloMessage=React.createClass({
      render:function () {
         return <h1>Hello React</h1>
       }
     });

     ReactDOM.render(
      //在模板中插入<HelloMessage/>时会自动生成一个实例
       <HelloMessage/>,
       document.getElementById("container")
     );


         /**
      定义组件类，实现：组件从外部接收内容，并进行展示
    **/
    //我们约定：用于传值的属性名称helloText
    // var HelloMessage=React.createClass({
    //   render:function () {
    //     /**
    //       this表示当前这个组件对象
    //       this.props.helloText 可以解释：当前组件对象的 props对象中存储的 helloText属性中的值
    //     **/
    //     return <h1>{this.props.helloText}</h1>
    //   }
    // });
    // ReactDOM.render(
    //   <HelloMessage helloText="你好 蓝鸥"/>,
    //   document.getElementById("container")
    // );
  </script>
</html>