If your are using editorconfig, this is my config:
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
npm i eslint @babel/eslint-parser @babel/preset-env @babel/preset-react prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-storybook -D
Create the files .eslintrc.js, .prettierrc.js and a file called
babel.config.js.
.eslintrc.js
module.exports = {
env: {
browser: true,
es2021: true,
jest: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
'plugin:storybook/recommended',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: '@babel/eslint-parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['react', 'prettier', 'react-hooks'],
settings: {
react: {
version: 'detect',
},
},
rules: {
'react/react-in-jsx-scope': 'off',
},
};.prettierrc.js
module.exports = {
arrowParens: 'always',
bracketSpacing: true,
endOfLine: 'lf',
htmlWhitespaceSensitivity: 'ignore',
insertPragma: false,
jsxSingleQuote: false,
printWidth: 80,
proseWrap: 'always',
quoteProps: 'as-needed',
requirePragma: false,
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'all',
useTabs: false,
vueIndentScriptAndStyle: false,
embeddedLanguageFormatting: 'off',
};babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
['@babel/preset-react', { runtime: 'automatic' }],
],
};If your are using proptypes, install it:
npm i prop-types
And use:
For tests, we're going to use vitest and testing-library.
npm i -D vitest jsdom @testing-library/react @testing-library/jest-dom
Now, in your vite.config.js:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
root: 'src',
build: {
outDir: '../dist',
},
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['../.test/setup.js'],
include: ['**/*(*.)?{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
exclude: ['node_modules', 'dist', '.idea', '.git', '.cache'],
},
});For the file in /.test/setup.js, use:
import '@testing-library/jest-dom';
import 'jest-styled-components';Ps.: I added jest-styled-components to make it easy for me. I am going to use
Styled-Components. If your aren't, please comment that line out.
npm i styled-components
npm i -D jest-styled-components @types/styled-components
Create a folder called styles in src. Add the files render-theme.jsx,
global-styles.jsx, theme.js and a styled-theme-provider.jsx.
The file theme.js is where you should add the theme for your application, for
example (the most simple and ugly theme you would ever see):
export const theme = {
colors: {
primary: 'red',
secondary: 'blue',
},
};The global-styles.jsx is where we add the global theme for our application.
Here we can add fonts, provide css reset and more.
import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
`;The styled-theme-provider.jsx makes things easier by providing the theme to
other components.
import { ThemeProvider } from 'styled-components';
import Proptypes from 'prop-types';
import { GlobalStyles } from './global-styles';
import { theme } from './theme';
export const StyledThemeProvider = ({ children }) => {
return (
<ThemeProvider theme={theme}>
<GlobalStyles />
{children}
</ThemeProvider>
);
};
StyledThemeProvider.propTypes = {
children: Proptypes.node.isRequired,
};The file render-theme.jsx is going to be used for tests. It will provide the
StyledThemeProvider so we can use styled-components in our tests.
This is the most basic version of the renderTheme function.
import { render } from '@testing-library/react';
import { StyledThemeProvider } from './styled-theme-provider';
export const renderTheme = (children) => {
return render(<StyledThemeProvider>{children}</StyledThemeProvider>);
};And on the main.jsx, you may want to wrap everything using
StyledThemeProvider.
import React from 'react';
import ReactDOM from 'react-dom/client';
import { StyledThemeProvider } from './styles/styled-theme-provider';
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<StyledThemeProvider>
<App />
</StyledThemeProvider>
</React.StrictMode>,
);npm install react-markdown
import ReactMarkdown from 'react-markdown';
import { TextComponent } from '../TextComponent';
<TextComponent>
<ReactMarkdown>{html}</ReactMarkdown>,
</TextComponent>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent