react的”Hello World ！“
本文主要简述react的开始使用
1.引入js文件
<!-- 1.核心文件 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 2.操作的DOM -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 3.翻译器 将浏览器不识别的JS（es7，es8）语法转化为识别的es5 JSX语法 翻译成浏览器识别的语法 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>2.整体代码
<body>
<!-- react布局容器 -->
<div id="app"> </div>
<script type="text/babel">
// render(布局，容器)
ReactDOM.render(<h1>hello world !</h1>,
//在哪个容器中使用
document.querySelector("#app")
)
</script>
</body>这样，hello world !就会显示在页面上啦！
3.进一步和注意事项
script中的type一定要写type=”text/babel“
<body>
<div id="app2">乌拉</div>
<script type="text/babel">
ReactDOM.render( <div><h1>新闻标题</h1>
<p>乌克兰的总统是个好演员</p>
<hr/>{ //单表签一定要加"/",不然直接报错
//JSX语法中< </ 识别为html解析的开始和结束
}
<p>注释{
// 这样写单行注释
// JSX{}识别为JS
// 单括号语法 里面可以写表达式
/*
段落注释 多行注释
*/
}
</p>
</div>,app2)
// 布局比较复杂的时候 用（）包起来 简洁 方便阅读
// react和vue2使用组件一样，必须有唯一的根元素，即有<div></div>包裹
// 在app2中有内容的情况下，内容会被覆盖掉
</script>
</body>4.上方代码简写
上方3的代码越多，看起来越复杂，越紊乱，可以用变量将html接收一下
<body>
<div id="app2">乌拉</div>
<script type="text/babel">
//layout 虚拟Dom 一般把虚拟DOM 看作一个js对象(存储了布局的信息)
let layout=(
<div><h1>新闻标题</h1>
<p>乌克兰的总统是个好演员</p>
<hr/>
<p>注释 </p>
</div> )
ReactDOM.render(layout,app2)
console.log("lauout:",layout)
console.log("app2:",app2)
</script>
</body>react jsx 虚拟DOM（好像写过了，先有点印象就行...）
1.通过JSX创建虚拟DOM
2.通过 render渲染到界面上 成为真正的DOM(diff算法)
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！