coryhouse / coryhouse/ps-react

create-react-app Update Steps

Open
#25 3 comments 6 reactions 1 assignee Claimed by @coryhouse View on GitHub
bug
Dominant language
JavaScript
Stars
138
Forks
74
PR merge metrics
No merged PRs in 30d

Description

The course was published using create-react-app 1.

Create-react-app 3 involves the following breaking changes that aren't yet reflected in the course:

NOTE: Checked boxes below signify patched, but need to be published and uploaded.

- [ ] create-react-app 3 only generates one webpack.config. It uses env vars for settings. Need to update videos to reflect
- [x] In "Testing" module, in [Demo: Unit Testing](https://app.pluralsight.com/player?course=react-creating-reusable-components&author=cory-house&name=react-creating-reusable-components-m9&clip=8&mode=live), install the `react-test-renderer` version that matches your React version. Check package.json to see the version of React you're using. For example, if you're running React 16.8.0, then `npm install react-test-renderer@16.8.0`.
- [ ] Eliminate the separate /utils file that we create in M9-10 (testing) since it ultimately isn't used and can't be published that way because /utils doesn't get published.
- [ ] In the "Publishing" module, in [Demo: Production Component Library Build](https://app.pluralsight.com/player?course=react-creating-reusable-components&author=cory-house&name=react-creating-reusable-components-m11&clip=4&mode=live), make the following tweaks to the babel config:
- [ ] This is patched at 2:22, but need to record this audio: "Note that I'm referencing the babel preset under the babel namespace. We're telling babel to transpile our modules to commonJS format, which is a common standard for npm packages. And we're tweaking the configuration of react-app. We're [setting the absolute runtime to false on the react-app preset](https://github.com/facebook/create-react-app/issues/5443#issuecomment-430188464). Otherwise the react-app preset will try to reference the babel runtime locally. We're setting helpers to false too. You can set helpers to true to potentially reduce your bundle sizes, but you need to add `@babel/runtime` as a dependency of your component library if you do so."
- [ ] Babel 7 moved their packages under the `@babel` namespace. So, check your package.json for the version of `@babel/core` installed by create-react-app, and install the corresponding versions of `@babel/preset-env` and `@babel/cli`. For example, if `@babel/core 7.1.0` is installed, then run this: `npm i @babel/preset-env@7.1.0 @babel/cli@7.1.0`.
- [ ] Reference `@babel/env` (instead of `babel-env`)
- [ ] Update final exercise files to reflect being generated from cra 3

In summary, do this:

```
"babel": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs"
}
],
[
"react-app",
{
"helpers": false,
"absoluteRuntime": false
}
]
]
},
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.