【React】 React 基础入门在HTML页面中直接引入React 引入react.js 引入react-dom.

在HTML页面中直接引入React

引入react.js
引入react-dom.js
引入babel.js

在页面使用React的简单示例：

<head>
    <script src="https://unpkg.com/react@18.3.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18.3.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>

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

    <script type="text/babel">
        const container = document.getElementById('root')
        const root = ReactDOM.createRoot(container)
        root.render(<h1>hello</h1>)
    </script>

</body>

新建并启动React项目

运行如下三行命令即可快速新建并启动一个React 项目：

npx create-react-app my-app
cd my-app
npm run start

这会初始化一个新项目，my-app就是项目和文件夹的名称，然后下载相关的依赖，运行 npm run start 命令会自动打开浏览器，呈现React项目默认页面。

React主要的入口文件包括：

./src/App.js ：这个文件是根组件，其它的组件都会被导入到这里。
./src/index.js：入口脚本。作用是导入react包，挂载和渲染根组件到页面的某个元素上。
./public/index.html：入口页面。有一个id为root的div，React将会挂载到这个元素下面。

现在，编辑./src/App.js文件内容如下：

export default ()=> <h1>Hello, React !</h1>

浏览器会自动刷新为新的内容。