React 里面的 App.js vs index.js

最新推荐文章于 2024-08-04 13:39:35 发布

hudawei996

最新推荐文章于 2024-08-04 13:39:35 发布

阅读量718

点赞数 1

文章标签： javascript react.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Goals1989/article/details/128533358

版权

文章介绍了React应用的基本结构，重点在App.js中的组件定义以及如何在index.js中进行渲染。App.js定义了一个名为App的功能组件，显示‘HelloWorld’文本。此组件在index.js中通过ReactDOM.render方法被渲染到HTML文档的根元素。index.js还引用了reportWebVitals用于性能监控。

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

App.js

import './App.css';
function App() {
  return (
    <p>
      Hello world 
    </p>
  );
}
export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

很明显， App是一个component。APP 是DOM Tree最顶端的component, 它是一个html 文件。 App.js 里面的App function 返回这个html component（文件），可以用《App /》来表示， App.js 本身并没有render功能。想要render这个component，我们要在index.js 里面把这个component render 出来。就把app当作普通的component 就可以了。