add posts

data/blog/tips/passing-props-emotion-styles-material-ui.md

@@ -2,19 +2,17 @@
 title: Fixing Material UI and Emotion's handling of Transient Options
 date: '2023-01-31'
 draft: false
-tags: ['web development', 'react', 'material ui']
+tags: ['Web development', 'React', 'Material UI', 'tips']
 summary: 'Passing Props to custom Emotion styles with Material UI'
 ---
 
 Recently I encountered an issue with the Material UI that I couldn't wrap my head around. What was happening?
 
-Modern libraries for managing custom CSS, like Styled Components or Emotion, have accustomed us developer to the possibility to use styled elements as real, reusable components. They can even extend other styles or other components. CSS becomes building blocks like React, and that's just great.
+Modern libraries for managing custom CSS, like Styled Components or Emotion, have accustomed us developers to the possibility to use styled elements as real, reusable components. They can even extend other styles or other components. CSS becomes building blocks like React, and that's just great.
 
-Using Material UI means using Emotion. It works in a similar way to Styled Components, although the syntax is slightly different. 
-One of the advantages of using these libraries with React is that you can pass them props and you can change the style according to their values.
+Using Material UI means using Emotion. It works similarly to Styled Components, although the syntax is slightly different. One of the advantages of using these libraries with React is that you can pass them props and you can change the style according to their values.
 
-However, it turns out that Emotion with Material UI lack a proper handling of this feature (as of now at least), which is called transient options.
-So if it happens that you pass a boolean value as a prop and use it like this:
+However, it turns out that Emotion with Material UI lacks proper handling of this feature (as of now at least), which is called transient options. So if you pass a boolean value as a prop and use it like this:
 
 ```js
   // component
@@ -30,22 +28,23 @@ So if it happens that you pass a boolean value as a prop and use it like this:
   )
 ```
 
-React will throw an error in console -which is more of a warning, actually- saying: 'Warning: Received `true` for non-boolean attribute `isdarktheme`'.
-It will work, but the warning will stay.
+React will throw a warning saying: 'Received `true` for non-boolean attribute `isdarktheme`'. It will work, but the warning will stay.
 
-How to fix it? I found that there's an issue opened with Emotion about this, and here's the (best working workaround answer)[https://github.com/emotion-js/emotion/issues/2193#issuecomment-766173118]. 
+How to fix it? I found that there's an issue opened with Emotion about this, and here's [the best working workaround answer.](https://github.com/emotion-js/emotion/issues/2193#issuecomment-766173118)
 
-So here's how I followed it and implemented it. In one util file I added:
-```js
+So here's how I followed it and implemented it. In one util file, I added:
+
+```javascript
   export const transientOptions: Parameters<CreateStyled>[1] = {
     shouldForwardProp: (propName: string) => !propName.startsWith('$'),
   }
 ```
 
 This identifies the props starting with $ as transientOptions through the React hook shouldForwardProp. As the name says, it will allow the prop to be passed.
 
-Then I can import the method and use it as options for the emotion component as option. Here's with TS:
-```js
+Then I can import the method and use it as an option for the emotion component. Here's with TS:
+
+```typescript
   import { transientOptions } from 'utils'
 
   type Props = {
@@ -59,5 +58,4 @@ Then I can import the method and use it as options for the emotion component as
 
 The warning disappeared and the prop is correctly taken by Emotion.
 
-
 Thank you for reading! Let's connect on [Twitter](https://twitter.com/AlexBuaiscia) or [Mastodon](@[email protected])!

data/blog/tips/removing-react-imports.md

@@ -0,0 +1,49 @@
+---
+title: Removing Default React Imports in React. A Guide to Cleaner Code
+date: '2023-02-13'
+draft: false
+tags: ['Web development', 'React', 'tips']
+summary: 'Simplifying Your Codebase with the New JSX Transform and Eslint Configuration'
+---
+
+If you are one of the many people migrating their projects to React 18, maybe you skipped one great feature for your code coming along from the previous version (17): you can remove all default React imports! 
+To be precise, it was present also in some previous React versions, but it was always somehow hidden from the general public (or maybe just me?). 
+
+We were accustomed to the need of importing React in every. single. file.
+And maybe you are still doing it after the migration. I did it, indeed, for a while :D
+
+That is because this possibility is in the docs, but in a side note with an enigmatic title: ["Introducing the new JSX transform"](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#removing-unused-react-imports).
+
+In substance, it creates React as a global so it does not need to import it everywhere. How does it work? 
+It is quite simple. Instead of having:
+```js
+import React, {useState, useEffect} from 'react'
+```
+
+you can have the normal destructured import without the need to import the whole library:
+```js
+import {useState, useEffect} from 'react'
+```
+
+or skip it entirely if you don't need any hook.
+
+Also, instead of removing all those imports manually, React offers an automated script that will make everything for you: 
+```
+npx react-codemod update-react-imports
+```
+
+Just be careful to have all your work committed, as it will create changes probably on almost every file of your repository.
+
+
+## What about linting?
+
+There was another small problem. Eslint was complaining if one was removing React from a file, saying it was not a UMD global. 
+
+The missing piece is on this page, in a small note at the end of the page: [the eslint rule to disallow missing React when using JSX.](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md)
+
+At the bottom, there is a paragraph. If you are using the new JSX transform from React 17, you should disable this rule, adding "plugin:react/jsx-runtime" to "extends" in the eslint config file.
+
+Now everything will work as expected and you will have a much cleaner codebase!
+
+
+Thank you for reading! Let's connect on [Twitter](https://twitter.com/AlexBuaiscia)