# Starter pour des applications ReactJS ! --- ### Pourquoi ce starter ? * Besoin d'une base commune aux nouveaux projets * Application interne donc pas de SEO * Néanmoins, pas une solution miracle --- ### Choix des librairies * React 18 * TypeScript * TailwindCSS * Formik * react-router * Recoil * JEST --- ### Bonnes pratiques * One component = One folder * SMART/DUMB components * Too many props * PropTypes * Lib folder * Export names * JEST Test --- ### Organisation du projet ``` project └───src │ └───api │ └───assets │ └───atoms │ └───components │ │ └───%component% │ └───pages │ └───lib │ └───routes │ └───selectors ``` --- ### Boostrap du projet * Utilisation de [Create React App](https://github.com/facebook/create-react-app). * Création du projet avec create-react-app en typescript ``` npx create-react-app react-starter --template typescript ``` --- ### Docker * Dockerfile : container nodejs et installation de GIT. * devcontainer.json : liste d'extension VSCode, fowardPorts. --- ### ESLint et Prettier * Formattage au commit : https://prettier.io/docs/en/install.html#git-hooks * Plugin Prettier pour VS Code : https://prettier.io/docs/en/editors.html#visual-studio-code --- ### UI/UX Design * Installation TailwindCSS ``` npm install -D tailwindcss npx tailwindcss init ``` * Modification de la configuration des modules (tailwind.config.js) ``` module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` --- * Ajout des directives (index.css) ``` @tailwind base; @tailwind components; @tailwind utilities; ... ``` --- ### Persistence des données / Flux RecoilJS ``` npm install recoil ``` * Pourquoi RecoilJS et pas Redux ? une comparaison est disponible ici : https://gitlab.hardis-group.com/JBORDE/recoil-vs-redux --- ### Navigation dans les composants * React Router 6 ``` npm install react-router-dom@6 ``` * Installation https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app --- ### Formulaire * Formik ``` npm install formik ``` ```typescript= const Formik = () => { const loginValues = useSelector((state: RootState) => state.login); const dispatch = useDispatch(); const formik = useFormik({ initialValues: loginValues, validationSchema: validationSchema, onSubmit: (values) => { dispatch(login(values)); }, }); return ( <form onSubmit={formik.handleSubmit}> <TextField fullWidth name="email" label="Email" value={formik.values.email} onChange={formik.handleChange} error={formik.touched.email && Boolean(formik.errors.email)} helperText={formik.touched.email && formik.errors.email} /> <TextField fullWidth name="password" label="Password" type="password" value={formik.values.password} onChange={formik.handleChange} error={formik.touched.password && Boolean(formik.errors.password)} helperText={formik.touched.password && formik.errors.password} /> <Typography> {formik.values.date && isValid(formik.values.date) && format(formik.values.date, "PPPPpppp", { locale: fr })} </Typography> <Button color="primary" variant="contained" fullWidth type="submit"> Submit </Button> </form> ); }; ``` --- ### Et les tests Pour les tests expect https://jestjs.io/fr/docs/expect --- ```javascript import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; test('renders recoil button', () => { render(<App />); const linkElement = screen.getByText(/Mis à jour/i); expect(linkElement).toBeInTheDocument(); }); ``` --- ### CI/CD :rocket: .gitlab-ci.yml ```yml stages: - build - test build: stage: build image: node script: - echo "Start building App" - npm install - npm build - echo "Build successfully!" artifacts: expire_in: 1 hour paths: - build - node_modules/ test: stage: test image: node script: - echo "Testing App" - npm install - CI=true npm test - echo "Test successfully!" ``` --- ### Merci d'avoir écouté ! Vous pouvez retrouver le dépot gitlab du starter à [ce lien](https://gitlab.hardis-group.com/nantes-ingenierie/communnantes/starter-kit)