在没有 ES6 的 React 中导出和导入类

Question

I'm working on a react project but don't want to use ES6 , because I don't really understand how it works. I want to export my class, ShoppingList, given below:

class ShoppingList extends React.Component {
    render() {
        return (
            <div className="shopping-list">
                <h1>Shopping List for {this.props.name}</h1>
                <ul>
                    <li>Instagram</li>
                    <li>WhatsApp</li>
                    <li>Oculus</li>
                </ul>
            </div>
        );
    }
}

I want to import this into my index.js:

const rootElement = document.getElementById('root')
const ShoppingList = require('./Components/ShoppingList')

function App() {
    return (
        <div>
            <ShoppingList name="Abhinav" />
        </div>
    )
}

ReactDOM.render(<App />, rootElement)

But the require() function doesn't work. If anyone could tell me how to easily import ta function or how I could add ES6 to this. The image of the directory is given below:

Answer 1

dont want to use ES6, because I dont really understand how it works.

For this you have to take a look at the standards define for the language. You can start here . Most of the browswers today supports ES6+ features like class, fat arrow syntax, let, const etc.

For full support you have to set up any transpiler which is used to transpile latest standard code to working supported code. What this means is it will transpile the code to supported code for the browsers which does not understand the latest syntax.

For this you can use several tools like:

• Webpack
• Babel
• Typescript

etc. Typescript is a language which is a superset of javascript. It has all the latest features of javascript which is not yet released or supported.

If anyone could tell me how to easily import a function or how I could add ES6 to this.

See, if you want to import any function or class then it must be exported first. So, if we take your code example then you have to export it like:

export class ShoppingList extends React.Component {
     // class code
}

or

class ShoppingList extends React.Component {}
export { ShoppingList }; // normal export
export default ShoppingList; // default export don't need {}

In the above code you can see two types of export first one is inline export and you can default export it too like export default class ShoppingList ... .

In the second example you can see two types of exports:

• Normal export will be exported within {} and imported in {} too.
• Default export will be exported without braces and imported without braces too.

Now you can import it like:

import { ShoppingList } from './path/of/file'; // normal import
import ShoppingList from './path/of/file'; // default exported import    
import SList from './path/of/file'; // name it anything but works only for default exports