reactjs - 从 './App' 导入应用程序；

Question

我正在尝试根据 create-react-app 使用react.我是新手。

index.js

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

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

./App in import App from './App'; 我不清楚这是何时何地创建的，这是由 babel 完成的吗？

文件结构

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
     <div>myComponent</div>
    )
  }
}

export default App;

Answer 1

tl;dr

不，它不是由 Babel 完成的，而是由 create-react-app 包完成的。

该文件夹中的所有文件和文件夹都是在您运行时自动创建的，

create-react-app your-new-app-name

---

import App from './App'

上面一行用于导入你在文件App.js中编写的类在同一目录下。

接下来，两者的区别，

import App from './App'

和

import App from 'App'

如果要导入任何用户定义的文件，请使用first，second 用于导入包。作为Shubham Khatri提到，对于导入文件，无论是否使用 .js 在技术上都是相同的扩展名。

---

较长的版本

create-react-app是一个初学者工具包，适用于 React 新手或懒得从头开始构建应用程序的人。 create-react-app 所做的是，它将为您提供一个最小的运行 React 应用程序，具有可靠的文件夹结构。如他们的文档中所述，您可以通过提供全局安装，

npm install -g create-react-app

在此之后，每当你想创建一个新的应用程序时，你要做的就是，

create-react-app  your-new-app-name

这将自动生成一个包含您提到的所有文件的文件夹。

---

打开文件时在文件夹内 public/index.html , 你可以看到一条线

<div id="root"> </div>

在 src/index.js 上，你可以发现，

ReactDOM.render(
  <App />,{}
  document.getElementById('root')
);

如果你熟悉javascript，你可能知道document.getElementById('root')用于匹配 HTML 中 ID 为 root 的任何标签.所以上面的代码片段意味着，他们正在渲染 <App>对 ID 为 root 的 div 使用react的组件.这就是 React 与 HTML 页面通信的方式。

---

与其将所有组件代码写在一个文件中，不如将每个组件写在不同的文件中是一个很好的标准。在这里，App.js是一个基本上呈现文​​本 myComponent 的组件。要在其他文件中使用此组件，您必须做两件事。

1. 从定义组件的文件中导出组件。 ( export default App; )
2. 将组件导入到使用它的文件中。 ( import App from './App' )

导入的一般语法是，

import className, { functionName } from 'packageName'

或

import className, { functionName } from './path-to-file/fileName'

注意:就是./它告诉编译器是否查看 node_modules文件夹或您提到的路径。当您需要导入用户定义的文件时，请严格使用它。

---

希望这对您有所帮助!