Intro
A quick, straightforward and (as of January 2022) up-to-date guide for setting up create-react-app with the latest versions of emotion (11.7.1) and TypeScript (4.5.5).
This also documents the steps needed to migrate from npm
to yarn
v3, with offline cache, if you want.
-
initialize the project.
npx create-react-app my-app --template typescript
-
install
@emotion/react
npm i @emotion/react
emotion v11 includes
emotion-theming
(https://emotion.sh/docs/theming) -
Add a property to
tsconfig.json
:
"jsxImportSource": "@emotion/react"
-
Add
jsxImportSource
pragma to top (important) of each tsx file:
/** @jsxImportSource @emotion/react */
Optionally, remove the react import.
Bonus: npm
to yarn 3
migration
There aren't a lot of documentation about the latest (again, as of January 2022) version of yarn, 3.1.1
. Here's the steps I took to move from npm
and enable offline cache.
Remove
package-lock.json
andnode_modules
.-
add the following to
.gitignore
(I like to include a link for context):
# https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored .yarn/* !.yarn/cache !.yarn/patches !.yarn/plugins !.yarn/releases !.yarn/sdks !.yarn/versions
-
add to
yarnrc.yml
(create it if needed):
nodeLinker: node-modules yarnPath: .yarn/releases/yarn-3.1.1.cjs
run
yarn
.You're done!
yarn start
should start the dev environment as expected.Optional: replace references to
npm
in theREADME.md
.npm run
->yarn
,npm start
->yarn start
,npm test
->yarn test
.
Top comments (0)