Fabiot Fabiot - 13 days ago 5
Javascript Question

How does this code work with reactJs

I have the following code:

import React from 'react'
import Header from '../../components/Header'

export const CoreLayout = ({ children }) => (
<div>test</test>
)

CoreLayout.propTypes = {

}

export default CoreLayout


But I don't understand how this is picking that is react. I'm used to:

import React from 'react';
const Contacts = React.createClass({
render() {
return (
<div></div>
);
}
});
export default Contacts;


or

import React from 'react';
class Contacts extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
export default Contacts;


How can I add functions in the coded I showed above? Like functions to add logic in the template an things like that.

Answer
export const CoreLayout = ({ children }) => (
   <div>test</test>
)

Here, CoreLayout is called a Functional Stateless component.

In the React docs about components, the first example you see is a Functional stateless component.

Stateless components can be defined like this:

function Welcome(props, context) {
  return <h1>Hello, {props.name}</h1>;
}

OR using Arrow Function

const Welcome = (props, context) => {
  return <h1>Hello, {props.name}</h1>;
}

They have the following features:

  • They are pure functions. (with first argument props and second context)
  • No Class Needed
  • No this Keyword
  • No state and lifecycle methods.
  • Easy to Understand
  • Above all, they are simple and elegant.