React.js环境配置

最新推荐文章于 2023-05-19 22:02:38 发布

笔记大王

最新推荐文章于 2023-05-19 22:02:38 发布

阅读量146

点赞数

分类专栏： React.js基础到高级文章标签： react.js 前端前端框架 react Powered by 金山文档

本文链接：https://blog.csdn.net/m0_71276810/article/details/129303559

版权

React.js基础到高级专栏收录该内容

5 篇文章 0 订阅

订阅专栏

导入库

引入react核心库

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

引入react-dom，用于react操作DOM

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

引入babel，用于jsx转为js

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

创建容器

<div id="root"></div>

3.创建虚拟DOM

<script type="text/babel" > /* 一定要写type="text/babel" */
        class App extends React.Component {
            render(){
                return <h2>我是用类定义的组件</h2>
            }
        }
        //渲染虚拟DOM到页面
        ReactDOM.render(<App />,document.getElementById('root'))
</script>

4.整合

<body>
<div id="root"></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" > /* 一定要写type="text/babel" */
        class App extends React.Component {
            render(){
                return <h2>我是用类定义的组件</h2>
            }
        }
        //渲染虚拟DOM到页面
        ReactDOM.render(<App />,document.getElementById('root'))
</script>
</body>