00 react入门开篇

最新推荐文章于 2025-11-24 02:17:16 发布

原创最新推荐文章于 2025-11-24 02:17:16 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端 #reactjs

react 专栏收录该内容

5 篇文章

订阅专栏

本文是React入门教程，介绍了React的基本概念和特点，包括声明式编程、组件化开发。通过实例展示了如何在HTML页面中使用React创建元素并进行挂载。同时，提到了使用`create-react-app`脚手架快速搭建React应用的方法。

react入门开篇

react介绍

react是用于构建用户界面的javascript库
react的特点:
声明式
组件化
一次学习, 随处编写

具体见官网 https://react.docschina.org/

在HTML页面中使用react

<!DOCTYPE html>
<html lang="zh-cn">

<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>Document</title>
</head>

<body>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <div id="app"></div>

    <script>
		// 参数详解
        // "h1" -> 元素名
        // null -> 元素属性 Object 也可以是null
        // "hello React!" -> 元素内容
        // const title = React.createElement("h1", null, "hello React!");
        const title = React.createElement("h1", null, "hello React!",
                    React.createElement("span", null, "hello React! - span")
        );
        console.log(title, document.getElementById('app'))

        // 挂载
        ReactDOM.render(title, document.getElementById('app'))
    </script>

</body>

</html>