react框架__基础语法（1）

想回岸上的鱼

已于 2022-07-05 19:58:22 修改

阅读量165

点赞数

文章标签： react.js javascript 前端

于 2022-07-05 19:30:28 首次发布

本文链接：https://blog.csdn.net/m0_71486353/article/details/125625477

版权

本文介绍了如何使用npx create-react-app创建React项目，并详细讲解了React的基本框架和jsx语法，包括React元素的渲染、jsx的基本规则、内容和属性操作、样式设置、事件处理以及条件渲染等关键概念。

摘要由CSDN通过智能技术生成

一、脚手架创建步骤

（一）终端操作

npx create-react-app 项目名
cd 项目名
npm start

（二）清理项目目录

src中只留index.js(入口文件)、app.js文件（项目根据文件）
public中只留index.html(视图界面首页)

如需降低react的版本，在package.json中将 “react”: “^”,
“react-dom”: “^”,修改为需要的版本。
在终端中输入npm i 即可完成版本升降级

二、react程序应用

（一）基本框架

<body>
		<div id="root"> </div>
        <!-- type="text/babel":将 script 标签中的内容转换为浏览器可以识别的 JavaScript -->
		<script type="text/babel">
            ReactDOM.render(<h2>helloworld</h2>, document.getElementById('root'))
        </script>
	</body>

在这里插入图片描述
ReactDOM.render