Javascript '的目的是什么；出口'；在组件声明中？

在React（ES6）中，为什么我有时会看到这个

class Hello extends React.Component { ... }

有时是这样

export

关键字的意义是什么？如果使用webpack，是否需要对webpack.config.js文件进行任何更改

任何关于这方面的信息将不胜感激，提前感谢

---

更新：

main file.js

import React from 'react';
import ReactDOM from 'react-dom';

import { External } from './external';

class Hello extends React.Component {
  render() {
    return <div>

      <h1>Hello World (Main File this time)</h1>
      <External />

    </div>
  }
}

ReactDOM.render(<Hello/>, document.getElementById('main'));

export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

import { Hello } from './hello';

class World extends React.Component {
  render() {
    return <div><Hello /> world</div>; // jsx sytanx.
  }
}

从“React”导入React；
从“react dom”导入react dom；
从“/External”导入{External}；
类Hello扩展了React.Component{
render（）{
返回
Hello World（这次是主文件）
}
}
ReactDOM.render（，document.getElementById（'main'））；

external.js（同一目录）

导出类外部扩展React.Component{
render（）{
返回这是我的外部组件
}
}

---

这不起作用-您知道为什么吗？？？

导出一个值允许您将其导入到另一个文件中

如果我从

hello.js

文件导出此类：

// hello.js
export class Hello extends React.Component { ... }

然后我可以导入它并在

greeting.js

文件中使用它

// greeting.js
import { Hello } from './hello';

export class Greeting extends React.Component {
  render() {
    return <Hello />;
  }
}

---

通常，如果您的模块只导出一个值，您会希望使用此表单。

在解释

export

关键字之前，请让我向您澄清一下

---

正如您在互联网上看到的，在每个react应用程序中，您都需要使用两个重要的东西：

1/巴别塔

2/网页包装或浏览

解释 什么是巴贝尔的工作？ 您可能听说过

jsx

和

ES6

Babel的任务是将

jsx

传输到js，将ES6传输到ES5，这样浏览器就可以理解这两件事

而

export

关键字是ES6中的一项新功能，让我们导出

函数

，

变量

，以便您可以在其他

js

文件中访问它们

即：

hello.js

import React from 'react';
import ReactDOM from 'react-dom';

import { External } from './external';

class Hello extends React.Component {
  render() {
    return <div>

      <h1>Hello World (Main File this time)</h1>
      <External />

    </div>
  }
}

ReactDOM.render(<Hello/>, document.getElementById('main'));

export default class Hello extends React.Component {
  render() {
    return <div>Hello</div>
  }
}

import { Hello } from './hello';

class World extends React.Component {
  render() {
    return <div><Hello /> world</div>; // jsx sytanx.
  }
}

将导入的所有js文件和模块打包，并将其转换为onne单个文件

bundle.js

编辑：解决问题

在

jsx

中

始终将返回的html包装到

（）

中

。。。
render（）{
返回(
Hello World（这次是主文件）
)
}
...

此面向编程的组件或模块化方式，当您放入path webpack配置文件时会自动读取并包含依赖项。通过这种方式，它可以让你的编程更干净、更有条理（从我的角度来看），你应该用谷歌搜索“ES6模块语法”。对不起，你是说“导出”的更干净吗？你能比较一下你需要在

webpack.config

中包含哪些内容吗？

export

可以用于任何东西；不仅仅是一个反应成分。只要了解导出，您就会了解它对于任何使用它的代码是如何工作的。@Paulos3000您只需添加一个文件依赖项（webpack.config）

和module.exports={entry:.'/routes.jsx'

例如，routes.jsx文件包含主模块。这是一个示例。有不同的方法，我使用这种方法仅将Transfile作为包含所有模块的文件。添加“default”示例还有：）是的，

export default

对于一个组件来说更为惯用，只是为了提供信息-目前，任何web浏览器都不支持它。

export

关键字详细信息。谢谢，这很有帮助，也很清楚，但是当我尝试时，它似乎破坏了渲染过程。请查看更新到我原来的帖子…谢谢，但仍然不起作用！只要从我的

main file.js

中删除

import{External}；

和

，它就会再次工作。因此

External.js

或上面的

import

语句仍然存在问题…：（external.js与我的原始帖子完全相同…复制并粘贴）只需删除

{}

，然后尝试从“/external”导入external，并在

external

中导入

react

，仍然没有。仅供参考…我的main-file.js和external.js都在同一个目录中（以防有什么不同）。你能看看这个并试一试吗？

// dont need to set hello.js as an entry because we already import it into world.js
module.exports = {

  entry: [
    './src/world.js'  
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  }
};

...
render() {
  return (
    <div>
      <h1>Hello World (Main File this time)</h1>
      <External />
    </div>
  )
}
...