Skip to content

Commit fb48365

Browse files
committed
docs(react): update getting started for v37
1 parent 625966b commit fb48365

File tree

1 file changed

+6
-23
lines changed

1 file changed

+6
-23
lines changed

content/guides/react/index.mdx

+6-23
Original file line numberDiff line numberDiff line change
@@ -46,31 +46,15 @@ Primer React does not transform code to support older ECMAScript versions (eg. E
4646

4747
Any environment that uses Primer React should have all the necessary polyfills installed to comply with the latest code standards, as Primer React does not ship with them. Additionally, as Primer React does not transform code to support older versions, it may be necessary for projects to transform the code if support for older browsers (such as Edge 18) is needed.
4848

49-
### Minimizing bundle size
50-
51-
Module bundlers that use ECMAScript modules (ESM) will automatically tree-shake Primer React, ensuring that no unused code is included in your final bundle. However, if you're not using ESM, you may be able to drastically reduce the size of your final bundle by importing components individually from the `lib` subfolder:
52-
53-
```javascript
54-
// using import syntax
55-
import Box from '@primer/react/lib/Box'
56-
```
57-
58-
```javascript
59-
// using require syntax
60-
const Box = require('@primer/react/lib/Box')
61-
```
62-
63-
Note that the modules in the `lib` folder are CommonJS-style modules; if you're using ESM and a compatible module bundler, importing files individually from `lib` provides no benefit.
64-
6549
### Peer dependencies
6650

6751
Primer React ships with a few libraries labeled as peer dependencies. These libraries are commonly already installed in host projects and installing multiple versions can introduce errors.
6852

6953
Primer React requires the following peer dependencies:
7054

71-
- `styled-components` at version 4.0.0 or higher
72-
- `react` at versions 17.x or higher
73-
- `react-dom` at versions 17.x or higher
55+
- `styled-components` at version 5.0.0 or higher
56+
- `react` at versions 18.x or higher
57+
- `react-dom` at versions 18.x or higher
7458

7559
## BaseStyles
7660

@@ -133,13 +117,12 @@ Like React, Primer React emits warnings to the JavaScript console under certain
133117

134118
## Testing
135119

136-
Testing your application with Primer React is no different than testing your application with any other React library. Depending on your test environment and the testing libraries you use, you may need polyfills. For example, `jest` runs via Node runtime and uses [JSDOM](https://github.com/jsdom/jsdom) as a DOM implementation, meaning you will need to mock some browser APIs. We have [helpers](https://github.com/primer/react/blob/main/src/utils/test-helpers.tsx) that can be used to mock some of these APIs. You can import the helpers in your test setup file like so:
120+
Testing your application with Primer React is no different than testing your application with any other React library. Depending on your test environment and the testing libraries you use, you may need polyfills. For example, `jest` runs via Node runtime and uses [JSDOM](https://github.com/jsdom/jsdom) as a DOM implementation, meaning you will need to mock some browser APIs. We have [helpers](https://github.com/primer/react/blob/main/packages/react/src/utils/test-helpers.tsx) that can be used to mock some of these APIs. You can import the helpers in your test setup file like so:
137121

138122
```js
139-
import '@primer/react/lib-esm/utils/test-helpers' // For ESM
140-
import '@primer/react/lib/utils/test-helpers' // For CommonJS
123+
import '@primer/react/test-helpers'
141124
```
142125

143126
## More information
144127

145-
See the [primer/react repository](https://github.com/primer/react/tree/main/docs/content) for more information about how to use and contribute to Primer React. For component-specific documentation, check out the React section in the component's docs (example: [ActionList](/components/action-list/react)).
128+
See the [primer/react repository](https://github.com/primer/react) for more information about how to use and contribute to Primer React. For component-specific documentation, check out the React section in the component's docs (example: [ActionList](/components/action-list/react)).

0 commit comments

Comments
 (0)