Code Snippet

global.code-snippets ( 전역 설정시 scope 주요 )

• node js환경에는 cjs를 js로 자동으로 인식함 …..

• template literal $와 ⇒ \\$ 충돌나요

• 이렇게도 되는구나 ….

New JSX Transform

파일마다 하나하나 import React from 'react' 하지 않아도 됨

https://ko.legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

old JSX transform

new JSX Transfrom

import React from 'react';
function App() {
  return <h1>Hello World</h1>;
}
/* 리액트 +JSX 코드 해석*/
function App() {
  return React.createElement('h1', null, 'Hello world');
}

function App() {
  return <h1>Hello World</h1>;
}
/* 리액트 +JSX 코드 해석*/
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
  return _jsx('h1', { children: 'Hello world' });
}

new JSX Transform을 사용하는 방법은 위의 문서를 참고하되, 현재 환경인 eslint, vite 환경에서 플러그인으로 사용하는 법

1. Eslint

   npm install eslint-plugin-react

   https://github.com/jsx-eslint/eslint-plugin-react

   .estlintrc.cjs

   module.exports = {
   	/*아래 내용 추가*/
   	**extends: [
   	    'plugin:react/recommended',
   	    'plugin:react/jsx-runtime'
   	  ],**
   	}
   

2. Vite

   npm install @vitejs/plugin-react

   npm: @vitejs/plugin-react

   vite.config.js

   import react from '@vitejs/plugin-react';
   
   export default {
     plugins: [react()],
   };
   

ESM | CJS 😵‍💫