React——工程目录解析和简化

最新推荐文章于 2022-03-19 05:26:54 发布

木厶

最新推荐文章于 2022-03-19 05:26:54 发布

阅读量183

点赞数

分类专栏： react的学习文章标签： react

本文链接：https://blog.csdn.net/weixin_43848532/article/details/105367082

版权

react的学习专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、精简后的项目
在这里插入图片描述

README.md —— 项目的介绍，可以把内容全删了，留下自己的内容
package.json
package-lock.json
.gitignore —— 把不需要上传到git仓库的文件记录在这
node_modules —— 放包的文件夹
public / favicon.ico —— 项目的图标
public / index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <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"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

8、src / index.js —— 项目的主文件入口

import React from 'react'; // 引入JSX语法
import ReactDOM from 'react-dom';
import App from './App';

// ReactDOM.render —— 把某个组件挂载到某个dom下
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

9、src / App.js —— 一个子模块

import React from 'react';

function App() {
  return (
    <div>
      hello world
    </div>
  );
}

export default App;

木厶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React——工程目录解析和简化

1、精简后的项目README.md —— 项目的介绍，可以把内容全删了，留下自己的内容package.jsonpackage-lock.json.gitignore —— 把不需要上传到git仓库的文件记录在这node_modules —— 放包的文件夹public / favicon.ico —— 项目的图标public / index.html<!DOCTYPE h...
复制链接

扫一扫

专栏目录