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

Question

我正在尝试基于create-react-app 做出反应。我是新来的反应。

索引.js

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

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

./App inimport 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

应用程序.js

import React, { Component } from 'react';

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

export default App;

Answer 1

tl;博士

不，它不是由 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'

使用第一，如果你希望导入的用户自定义文件和第二的导入包。正如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 将 react的组件渲染到 div root。这就是 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文件夹还是您提到的路径。当您需要导入用户定义的文件时，请严格使用它。

希望这可以帮助！