react入门指南（三）react主体函数介绍-hello world

最新推荐文章于 2024-04-26 10:01:17 发布

勾勾g

最新推荐文章于 2024-04-26 10:01:17 发布

阅读量303

点赞数

分类专栏： react 文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/qq_44114279/article/details/107198041

版权

react 专栏收录该内容

4 篇文章

订阅专栏

react主体函数介绍

react主函数介绍
简单的实现react的hello world

react主函数介绍

React 是个对象核心, 解析vdom，组件，jsx元素
在控制台输出React，会得到如下结果
在这里插入图片描述
React是一个基类，里面有许多方法跟类，
主要由三部分：
{Component,createXxx,useXxx,}
Component 类表示组件
createXxx 方法创建一些元素
useXxx hooks钩子

简单的实现react的hello world

可以直接运行在html中

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

在react脚手架cli环境下的写法

import ReactDom from 'react-dom';

//react-dom 是个对象，{render,....}
//render 是个方法 参数(要渲染的react元素,要插入的容器,回调)

ReactDom.render(
  12,//需要渲染的html元素
  document.querySelector('#root'),//挂载点
  ()=>console.log('render 完毕')//挂载完成后的回调函数
);