React项目结构

最新推荐文章于 2024-03-14 14:17:23 发布

Q J X

最新推荐文章于 2024-03-14 14:17:23 发布

阅读量699

点赞数

分类专栏： React环境搭建文章标签： react.js vscode

本文链接：https://blog.csdn.net/qq_45194705/article/details/120549703

版权

React环境搭建专栏收录该内容

3 篇文章 0 订阅

订阅专栏

React项目结构

这里我使用VSCode打开项目

1、总览

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-62yShV6b-1632900743853)(https://i.loli.net/2021/09/08/CRSwIdBulqg5kOo.png)]

2、重要的三个文件

2.1、index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%代表public文件夹路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 移动端网页适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 安卓浏览器边框颜色（兼容性差） -->
    <meta name="theme-color" content="#000000" />
    <!-- 用于描述网站信息，以便搜索引擎收录 -->
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <!-- 网站添加苹果手机主屏时的图标 -->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!-- 应用加壳配置信息 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!-- 当浏览器不支持js,展示 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- 放置组件的容器，此处只放置App组件 -->
    <div id="root"></div>
  </body>
</html>

2.2、App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

2.3、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// 记录页面性能
import reportWebVitals from './reportWebVitals';

/* 渲染App到html页面 */
ReactDOM.render(
  /* StrictMode检查react的语法 */
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Q J X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
React项目结构

React项目结构这里我使用VSCode打开项目1、总览[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-62yShV6b-1632900743853)(https://i.loli.net/2021/09/08/CRSwIdBulqg5kOo.png)]2、重要的三个文件2.1、index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf
复制链接

扫一扫