I have a project using reactjs, which is transpiled by babel. I use the es2015 and react transforms in my .babelrc. I am currently refactoring and in my first pass I basically did export class foo for everything I needed. A lot of these classes should really just be functions, so I am trying to rewrite them as such, but I keep getting the same error. My main application file looks somethings like this:

import React, { Component } from 'react';
import {Foo, Bar} from './components/ui.js';
class Application extends Component { constructor(props){ super(props); this.state = { object: null } } componentDidMount(){ // code } componentDidUpdate(){ // other code } render(){ return( <div> <Foo /> <Bar /> </div> ) }
}
module.exports = Application

And my import from ui.js is like this:

import React, { Component } from 'react';
export class Foo extends Component { constructor(props){ super(props); } render() { return ( // Some JSX ) }
}
export class Bar extends Component { constructor(props){ super(props); } render() { return ( // Some other JSX ) }
}

When I try and change one of these exported classes to a function, for example:

// Note: I have tried a variety of syntax such as function, const, etc...
export var Bar { render() { return ( // Some other JSX ) }
}

I get the following error:

SyntaxError: Unexpected token <line where I declare a function>

I am not sure what I am doing wrong, and my google searches are only coming up with answers to other problems.

0

3 Answers

It's the same as defining the function as a variable but just adding export to the front e.g. (using ES6 syntax)

export const render = () => ( // Some other JSX
);

or alternatively

export var render = function() { return ( // Some other JSX );
};

2

Exporting functions is no different than exporting class. Basic rules must be followed .

1. Function/Class name should in CAPS
2. There will be only one "export" line .
3. Every function return body should have a single tag encompassing other parts. Most commonly used is a tag .
4. This usually works: import App from "./App"; where App.js is my jsx file. You can do an explicit import too . : import AllApp from "./classhouse.jsx";
5. Name of the js/jsx file does not matter. It can be anycase (lower, upper).
6. For returning multiple functions from one file, you need to create one more function , that encompasses all other functions .

See the example below showing multiple functions returned.

import React from 'react';
/* All function / class names HAS TO BE in CAPS */
var App1 = function (){ return ( <div> <h1> Hello World </h1> </div> )
}
var App2 = function (){ return ( <div> <h1>World Number 2 </h1> </div> );
}
var AllApp = function (){ return ( <div> <App1 /> <App2 /> </div> );
}
export default AllApp;

My index.js file:

import React from 'react';
import ReactDOM from "react-dom";
import AllApp from "./classhouse.jsx"; /* Note: App name has to be in CAPS */
import App from "./App";
const jsx =
<div> <AllApp /> <App />
</div>
ReactDOM.render(jsx, document.getElementById("root"));

You are writing functional components in wrong way.

function Welcome() { return <h1>Hello World</h1>;
}

or

const Welcome = () => { return <p>Hello Wrold</p>
}
export default Welcome ;

ES6 doesn't allow export default const. You must declare the constant first then export it.

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy