Bienvenue dans ce workshop pour la création d'une mini app Twitter. Cette application va nous permettre d'utiliser :
zodreact-querynext
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| //COLORS----------------------------------- | |
| :root { | |
| --color-red: #ef7b7b; | |
| --color-jellow: #fcf3ca; | |
| --color-green: #c4eada; | |
| /* --color-grey: #919190; */ |
| //configure json et explication | |
| //package.json | |
| //ext: s'occupe des fichiers .js et .json si il change relance le server nodemon | |
| //watch s'occupe des dossier | |
| "nodemonConfig": { | |
| "verbose": true, | |
| "watch": ["src", "config"], | |
| "ext": "js,json", | |
| "scripts": { | |
| "start": "nodemon your_main_file.js", |
| / Install Tailwind CSS | |
| / Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files. | |
| npm install -D tailwindcss postcss autoprefixer | |
| npx tailwindcss init -p | |
| / Configure your template paths | |
| / Add the paths to all of your template files in your tailwind.config.js file. | |
| tailwind.config.js |
| { | |
| "compilerOptions": { | |
| "target": "ES2020", | |
| "useDefineForClassFields": true, | |
| "lib": ["ES2020", "DOM", "DOM.Iterable"], | |
| "module": "ESNext", | |
| "skipLibCheck": true, | |
| /* Bundler mode */ | |
| "moduleResolution": "bundler", |
| { | |
| "compilerOptions": { | |
| "composite": true, | |
| "skipLibCheck": true, | |
| "module": "ESNext", | |
| "moduleResolution": "bundler", | |
| "allowSyntheticDefaultImports": true | |
| }, | |
| "include": ["vite.config.ts"] | |
| } |
| export default { | |
| plugins: { | |
| tailwindcss: {}, | |
| autoprefixer: {}, | |
| }, | |
| } |
| { | |
| "présentation":{ | |
| "nom": "", | |
| "prénom": "", | |
| "fonction": "WebDeveloper", | |
| "date-naissance": "29 janvier 1975", | |
| "residant": "Liège, Belgique" | |
| }, | |
| "reseaux":{ | |
| "nom": "", |
| /*création des liens ----------------------------------------------------------*/ | |
| const PageLink = () => { | |
| return ( | |
| <div> | |
| <NavLink exact to="/">Home</NavLink> | |
| <NavLink exact to="Works">Works</NavLink> | |
| <NavLink exact to="Contact">Contact</NavLink> | |
| </div> | |
| ); |
| npm install gh-pages --save-dev | |
| package.json : | |
| "homepage": "http://olygood.github.io/cardReact", | |
| "scripts": { | |
| "predeploy": "npm run build", | |
| "deploy": "gh-pages -d build" | |
| } | |
| npm run deploy | |
| aller sur gihub, repos, settings, pages, branch, gh-pages |