React入门

最新推荐文章于 2024-08-29 13:07:02 发布

欧雨铭

最新推荐文章于 2024-08-29 13:07:02 发布

阅读量94

点赞数

本文链接：https://blog.csdn.net/Taki_Sakura/article/details/121843674

版权

一、Hello React

1、准备容器

<div id="test"></div>

2、引入react核心库

<script type="text/javascript" src="../js/react.development.js"></script>

3、引入react-dom，用于支持react操作DOM

<script type="text/javascript" src="../js/react-dom.development.js"></script>

4、引入babel，用于将jsx转为js

<script type="text/javascript" src="../js/babel.min.js"></script>

5、创建jsx脚本

<script type="text/babel">
    // 创建虚拟DOM
    const VDOM = <h1>Hello React</h1>
    // React.createElement('标签名',{属性名:'属性值','内容'})
    // 渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello React</title>
  </head>
  <body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      const VDOM = <h1>Hello React</h1>
      ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
  </body>
</html>

二、jsx语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用{}。
样式的类名指定不要用class，要用className。
内联样式，要用style={{key:value}}的形式去写。
只有一个根标签
标签必须闭合
标签首字母

(1) 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

三、函数式组件

 <script type="text/babel">
    // 创建函数式组件
    function MyComponent() {
        return <h1>我是MyComponent，函数式组件</h1>
    }
    // 渲染虚拟DOM到页面
    ReactDOM.render(<MyComponent />, document.getElementById('test'))
</script>

四、类式组件

// 创建类式组件
class MyComponent extends React.Component {
    render() {
        return <h1>我是类式组件</h1>
    }
}
// 渲染虚拟DOM到页面 生成MyComponent实例化对象并调用render函数
ReactDOM.render(<MyComponent />, document.getElementById('test'))

欧雨铭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React入门

一、Hello React1、准备容器<div id="test"></div>2、引入react核心库<script type="text/javascript" src="../js/react.development.js"></script>3、引入react-dom，用于支持react操作DOM<script type="text/javascript" src="../js/react-dom.development.js"&
复制链接

扫一扫