【react】我的第一个React页面

最新推荐文章于 2023-06-02 22:05:49 发布

Justkang前端

最新推荐文章于 2023-06-02 22:05:49 发布

阅读量108

点赞数

分类专栏：前端 React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/CSDNJXZK/article/details/125044688

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

React

1 篇文章 0 订阅

订阅专栏

js渲染版本

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React 入门 1</title>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
  <div id="app"></div>
  <script>
      <!--入门代码-->
      const e = React.createElement;
      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = { liked: false };
        }
        render() {
          if (this.state.liked) {
            return 'You liked this.';
          }
          return e(
              'button',
              { onClick: () => this.setState({ liked: true }) },
              'Like'
          );
        }
      }


      const domContainer = document.querySelector('#app');
      ReactDOM.render(e(LikeButton), domContainer);
  </script>
</body>
</html>

JSX渲染版本

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>React 入门 JSX</title>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!--babel-->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
  const e = React.createElement;
  class LikeButton extends React.Component {
    constructor(props) {
      super(props);
      this.state = { liked: false };
    }
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }
      return (
          <button onClick={() => this.setState({ liked: true })}>
            Like
          </button>
      );
    }
  }


  const domContainer = document.querySelector('#app');
  ReactDOM.render(e(LikeButton), domContainer);
</script>
</body>
</html>

效果

请添加图片描述

Justkang前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【react】我的第一个React页面

js渲染版本<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-e
复制链接

扫一扫