Exporting functions with reactjs and babel

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.

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 ); }; 

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.