React与面向对象

最新推荐文章于 2024-02-21 09:49:05 发布

huangStomach

最新推荐文章于 2024-02-21 09:49:05 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： react javascript

本文链接：https://blog.youkuaiyun.com/u010494023/article/details/81173736

版权

本文探讨了React框架如何结合面向对象编程的概念，通过组件、属性等关键概念，阐述了React应用的构建方式。介绍了组件的类表示形式，强调了state和props在组件中的角色，以及如何使用jsx语法在组件中操作这些属性。

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

来自我的博客

开始

实际上官方提供给我们的教程已经非常清晰明确了reactjs.org

当我们安装好之后，就会拥有一个create-react-app对应模板的react应用

结构如下:

├── node_modules
├── package.json
├── public
├── README.md
├── src
└── yarn.lock

其中要注意的一点是，我们之后编写的代码不会直接被浏览器所识别,我们应尽量把所有需要react-loader为我们做转换的代码放置在src目录下

src目录结构:

.
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── registerServiceWorker.js

这个目录中会有很多的js文件和css文件

public目录结构:

├── favicon.ico
├── index.html
└── manifest.json

我们可以看到public目录结构更加像我们所熟悉的静态web应用的样子,我们访问的也是响应的index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">

最低0.47元/天解锁文章