You can create custom components to organize and maintain your code as well as share those components easily with the rest of the team.
Start by making a new file in src/components/index
called MyName.jsx
(generally component files should be capitalized). Then begin typing comp-func
. If you have your snippets set up (see Getting Set Up) you should see a snippet appear.
Hit enter to see the code appear. Don't click anywhere. Just begin typing MyName
(generally the name of the component should match the name of the file). This should appear in two places in the file, which should now look like this:
import React from 'react';
const MyName = props => (
<div />
);
export default MyName;
Then, replace the <div />
with the following:
<p>Hello! My name is {props.name}.</p>
The code {props.name}
will display the name
that is passed to the component once it's used (for more on React props check the official docs).
Now that it's created, you can use it in your src/components/index/page.js
file.
First it must be imported with:
import MyName from './MyName';
Then, you can use it in the JSX for your Page
component like this:
<MyName name="Andrew" />
After all that, you should have two files that look like this:
/* src/components/index/MyName.jsx */
import React from 'react';
const MyName = props => (
<p>Hello! My name is {props.name}.</p>
);
export default MyName;
/* src/components/index/page.js */
// ... other imports
import MyName from './MyName';
class Page extends React.Component {
render() {
return (
// ...other elements
<MyName name="Andrew" />
// ...other elements
);
}
}
export default Page;
export { Helmet } from 'react-helmet';
If you save this, you should see a paragraph on your page that reads:
Hello! My name is Andrew.
Often custom components have their own components inside them. They may also have separate style files used to style them. In either case, you should make not just a component but a component module.
POLITICO component modules are directories that look like this:
ComponentName
├── index.js
├── styles.scss
└── ...OtherChildComponents
For example, you can make a component called Greeting
which has some styles, and contains your original MyName
component as a child.
Create a file in src/components/index/Greeting/
called index.js
. Then type: comp-func-styles
and hit Enter to use your snippet. Without clicking away, type the word Greeting
which should appear in three different places in your file.
Place MyName.jsx
inside src/components/index/Greeting
and then import it and use it index.js
as described in the section above.
To add styles, create a file called styles.scss
inside src/components/index/Greeting
. Type comp
and hit Enter to use your snippet. Any styles you put in this file will be mapped to only your Greeting
component.
Now, you can use it in your src/components/index/page.js
file.
Import it:
import Greeting from './Greeting';
Then use it in the JSX for your Page
component like this:
<Greeting />
After all this, your files should look like this:
/* src/components/index/Greeting/MyName.jsx */
import React from 'react';
const MyName = props => (
<p>Hello! My name is {props.name}.</p>
);
export default MyName;
/* src/components/index/Greeting/index.js */
import React from 'react';
import classnames from 'classnames';
import MyName from './MyName'
import { styles } from './styles.scss';
class Greeting extends React.Component {
constructor (props) {
super(props);
}
render () {
return (
<div className={classnames('Greeting', styles)}>
<MyName name="Andrew" />
</div>
);
}
}
export default Greeting;
/* src/components/index/Greeting/styles.scss */
.styles :global {
}
/* src/components/index/page.js */
// ... other imports
import Greeting from './Greeting';
class Page extends React.Component {
render() {
return (
// ...other elements
<Greeting />
// ...other elements
);
}
}
export default Page;
export { Helmet } from 'react-helmet';
For more on the POLITICO component module style, check out those docs.