Question

我正在尝试根据create-react-app做出反应。我很反应。

index.js

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

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

import App from './App';中的

./ App 对我来说并不清楚何时何地创建，这是由babel完成的吗？

file strucutre

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;博士

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

运行时会自动创建该文件夹中的所有文件和文件夹，

import App from './App'

App.js

以上行用于导入您在相同目录下的文件import App from './App'中编写的类。

接下来，区别，

import App from 'App'

和

.js

如果要为导入包导入任何用户定义文件和第二，请使用第一。正如Shubham Khatri所述，对于导入文件，如果您使用npm install -g create-react-app扩展名，则技术上相同。

版本较长

create-react-app是一个初学者工具包，适合那些不熟悉React或者懒得从头构建应用程序的人。 create-react-app的作用是，它将为您提供具有可靠文件夹结构的最小运行React应用程序。如文档中所述，您可以通过给予
来全局安装
create-react-app your-new-app-name

在此之后，只要您想创建一个新应用，您想要做的就是，

public/index.html

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

当您打开文件<div id="root"> </div>时，在文件夹中，您可以看到一行

src/index.js

在ReactDOM.render( <App />,{} document.getElementById('root') );上，你可以找到，

document.getElementById('root')

如果您熟悉javascript，则可能知道root用于匹配HTML中的任何标记，ID为<App>。因此，上面的代码片段意味着，他们正在呈现root组件，对ID为App.js的div做出反应。这就是React与HTML页面通信的方式。

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

从定义它的文件中导出组件。（import App from './App'）

将组件导入到使用它的文件中。（import className, { functionName } from 'packageName'）

导入的一般语法是，

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

或

./

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

希望这有帮助！

Answer 2

导入组件时

import App from './App';

它将导入与App.js相同的目标中存在的文件index.js 在webpack配置中，我们指定了babel需要构建哪些类型的文件，如果我们指定.js或.jsx，则在导入文件时默认采用该文件的扩展名。我们没有明确提到它。你可以改变你的immport就像

import App from './App.js';

技术上是相同的。

create-react-app npm包使用webpack来构建您可以从github目录中的package/react-scripts/package.json看到的代码

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

2 个答案:

的 TL;博士

版本较长