React 使用NPM创建项目
虽然研究 React 已经有一段时间，但之前写 Demo 都是直接新建文件夹然后在里面写 html 和 js，究其原因还是因为之前用不了 NPM。现在终于是把 NPM 的问题解决了（从 IDEA 上 copy 了个代理的地址），这下才能算是真正的 DEV 环境。
但有了 NPM 反而不知道怎么创建项目了。找了半天关于创建新项目的资料，才算搞明白，还有之前一直不知道怎么搞的 export 和 import 用不了的问题在正常开发环境里也没有了，必须记录一下。
安装 NPM
首先是安装 NPM，不必多说，没有 NPM 搞前端就像没有 Maven 搞后端，跟个原始人一样。下载安装 Node.js 后，就自带了 NPM，在 cmd 中使用 npm --version 命令查看，出现版本号即为安装成功，环境变量也不用配，比安装 Java 都简单。有了 NPM 就可以创建项目了，使用的编辑器自然是 VSCode，好使。
创建 React 项目
在 VSC 中打开项目文件夹，然后在打开控制台终端（VSC 直接内置终端，当然直接开个 CMD 也行），输入
npx create-react-app my-react
此命令要求 npm5.2+，但现在装的应该都是最新版本吧。然后回车确认，就可以看到 NPM 正在下载包了：
时间可能有点小久，安装速度跟 NPM 设置的仓库地址有关系。安装完成后，终端会显示：
We suggest that you begin by typing:
cd my-react
npm start
Happy hacking!
PS E:\VueJS>
可以看到它已经将后续的命令列出来了，即进入项目目录并使用 npm start 命令启动项目。如果此时按这个做，那么就会看到官方的项目模板：
然后在终端里可以看到启动相关的信息：
这样按照官方配置最简单的 React 项目久启动成功了。
纯净 React 项目
虽然按模板启动成功了，但可以看到项目路径非常复杂（稍微）：
如果我们想要一个纯净的 React 项目写自己的代码怎么办呢？很简单，直接将 public 和 src 文件夹清空（里面的文件全删掉！），git 配置文件和 readme 也可以删掉，这样我们可以得到一个框架：
这样看起来就舒服了。但缺少了这么多文件，项目肯定是跑不了了。还需要将其中几个关键的骨架加回去：
index.html
在 public 文件夹下添加 index.html 文件，这个文件是项目启动后的入口，显示的就是这个页面的内容。文件内容就是经典的 HTML 框架，只需要有一个 root 节点就可以了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Qiyuanc</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
App.js
在 src 文件夹下添加 App.js 文件，这个文件顾名思义就是整个应用程序，后续就是对它的内容进行自定义，并将它渲染到 root 节点上就可以了：
import React, { Component } from 'react'
export default class App extends Component {
render() {
return (
<div>
Hello Qiyuanc！
</div>
)
}
}
index.js
在 src 文件夹下添加 index.js 文件，这个文件就是负责将 App 渲染到 index 上，很简单：
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))
创建了这三个关键文件，按 Ctrl+S 保存并刷新页面，就可以看到页面正常显示内容“Hello Qiyuanc！”了！
import 与 export
之前一直用原始方法创建 html 文件和 js 文件，import 和 export 这两个东西一直用不起来，查了一大堆资料都没解决，人都晕了。这次有了项目模板，可以再试一试了。
在 src 路径下创建 Child.js 文件：
export function Child(props) {
return (
<div>
<div>{props.children[2]}</div>
<div>{props.children[1]}</div>
<div>{props.children[0]}</div>
</div>
)
}
此处使用具名导出的方式，导出了 Child 组件。再创建 Parent.js 文件，导入 Child 组件：
import { Child } from './Child.js'
export function Parent() {
return (
<Child>
{"这是0，应该排第一"}
<>这是1，应该排第二</>
<div>这是2，应该排第三</div>
</Child>
)
}
对应 Child.js 里的具名导出，此处使用了具名导入（加花括号），这样就可以使用 Child 组件了（真正的组件化！）。
同时 Parent.js 里也导出了 Parent 组件，在 App.js 中用到：
import { Parent } from './Parent.js'
function App() {
return (
<Parent />
);
}
export default App;
此处使用的是默认导出，对应的，在 index.js 中导入的方式为默认导入：
import React from 'react'
import ReactDOM from 'react-dom'
// 默认导入
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))
最后 index.js 中将 App 组件渲染到了 root 节点上，完成了页面的显示！！！
终于搞定这个 import 和 export 的问题了，舒服了。
最后再提两个点：
-
使用
npm start开的项目，目前都是直接在终端里 Ctrl+C 停止的，不知道有没有别的办法； -
控制台报了个警告，如下。
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
意思就是说 React 18 里已经不用 ReactDOM.render 方法啦，这下也算是与时代接轨了，类目。
标签：NPM,创建,App,js,React,export,import From： https://www.cnblogs.com/qiyuanc/p/front10.html