重学react系列（二）—— 元素渲染与组件

dreamer_sen

于 2020-09-22 17:04:37 发布

阅读量364

点赞数

分类专栏：重学react 文章标签： reactjs javascript html 前端 web前端

本文链接：https://blog.youkuaiyun.com/dreamer_sen/article/details/108732884

版权

本文介绍了React元素渲染的基本概念，包括如何通过JSX创建元素并添加样式、事件和变量。接着，文章深入讲解了React组件，阐述了组件的本质和用途，通过函数组件和类组件的示例展示组件的创建和使用。最后，文章总结了元素渲染和组件的基础知识，为后续学习props奠定了基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素渲染

在上一篇中，我们简单的了解了怎么使用react搭建起一个项目，这次我们再进行下一步。在这之前我想先做一个处理，因为脚手架工具生成了很多我们用不到的代码，所以我这里就都去掉了，只留下我需要的两个文件（package.json暂时也用不到其实，但还是留着吧）：
在这里插入图片描述

1.index.html （这里只有一个div，作为targetDom，也算是根元素了，所有元素会挂载到这个节点上，但是并不是只能有一个跟节点，只是大家有这样的一个习惯）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

2.index.js （同样引入react,react-dom,调用ReactDOM.render()将元素渲染到根节点上）

最低0.47元/天解锁文章