How do I add a Babel plugin to a create-react-app project?

Question

I'm following LearnCode.academy video tutorial and on video #7 at some point the tutor/presenter add the following code

@connect((store) => {
    return {user: store.user.user, tweets: store.tweers.tweers}
})

I understand I need to configure Webpack by adding babel-plugin-transform-decorators-legacy but create-react-app is not showing any of the configuration files. What is the solution here?

Answer 1

While you could eject for decorators it is completely unnecessary and comes with all downsides of ejecting (you don't get future updates to the tooling automatically).

Instead I recommend either using learning resources that don't rely on experimental features (which decorators currently are), or learning how to write equivalent code without them.

For example:

class MyComponent extends React.Component {
  // ...
}

export default connect((store) => {
    return {user: store.user.user, tweets: store.tweers.tweers}
})(MyComponent);

If you can't figure out how to write some example without decorators, create a new question and link to it in comments, and I'll try to answer.