Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Component & Styled-jsx
0 j'aime328 vues
La formation présentée par Sandy Ludosky se concentre sur l'amélioration du développement web à l'aide de CSS-in-JS, notamment avec les bibliothèques Styled Components et Styled-JSX. Elle est destinée aux développeurs professionnels ayant des connaissances en ReactJS et aborde des sujets allant des bases du CSS à l'utilisation avancée de ces bibliothèques pour créer des composants réutilisables et gérer le style global. La formation inclut également des démonstrations pratiques et des ressources pour aider les participants à mettre en œuvre ces techniques dans leurs projets web modernes.
![Une formation
Les options CSS-in-JS
CSS
styles/globals.css
styles/[component].module.css
CSS-in-JS
styled-jsx](https://image.slidesharecdn.com/alphorm-220805190327-aa90758d/85/Alphorm-com-Formation-Ameliorer-le-developpement-avec-CSS-in-JS-_-Styled-Component-Styled-jsx-79-320.jpg)
![Une formation
Les options CSS-in-JS
CSS
styles/globals.css
styles/[component].module.css
CSS-in-JS
styled-jsx](https://image.slidesharecdn.com/alphorm-220805190327-aa90758d/85/Alphorm-com-Formation-Ameliorer-le-developpement-avec-CSS-in-JS-_-Styled-Component-Styled-jsx-81-320.jpg)
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Component & Styled-jsx
- 1. Formation Améliorer le développement avec CSS-in-JS Styled Component & Styled-jsx Une formation Sandy LUDOSKY
- 2. Cursus CSS
- 3. Une formation Introduction 1. Premier pas avec le CSS moderne 2. Web moderne : les méthodes et solutions 3. CSS-in-JS : styled-component 4. CSS-in-JS : styled-component (avancé) 5. CSS-in-JS : librairie styled-jsx avec NextJS 6. CSS-in-JS : librairie styled-jsx avec ReactJS Conclusion Plan de la formation
- 4. Une formation Niveau intermédiaire à avancé Développeurs professionnels Intégrateurs web Public concerné
- 8. Présentation du projet Une formation Sandy LUDOSKY
- 9. Une formation Présentation des outils Visual Studio Code Navigateur moderne React Developer Tools
- 10. Ressources et outils Une formation Sandy LUDOSKY
- 12. Node.js & npm
- 13. Librairies
- 14. Une formation Les fichiers téléchargeables 📁 Version de démarrage Version finale Ressources
- 15. Découvrir les fondements et les principes de construction moderne CSS Une formation Sandy LUDOSKY
- 16. Une formation Présentation CSS = Cascading Stylesheet 1994 : début CSS 1996 : premières spécifications CSS1
- 17. Une formation Versions du CSS CSS 1.0 => CSS 2.0 => CSS 2.1 CSS 3
- 18. Utilités du CSS Mise en forme et habillage page web Métiers du web et numérique Photo by Campaign Creators on Unsplash
- 19. Photo by Alex Kotliarskyi on Unsplash Utilités du CSS
- 20. Photo by UX Indonesia on Unsplash Utilités du CSS
- 21. Photo by Ярослав Алексеенко on Unsplash Photo by Brett Jordan on Unsplash CSS
- 22. Découvrir les solutions du CSS moderne Une formation Sandy LUDOSKY
- 23. Une formation Les solutions CSS moderne La grille CSS & Flexbox Les librairies & frameworks CSS-in-JS
- 24. Écrire du CSS dans javascript Une formation Sandy LUDOSKY
- 25. Une formation Écrire du CSS dans javascript Installation Aucune Syntaxe const styles = { … }
- 26. Écrire du CSS modulaire avec styled JSX et styled component Une formation Sandy LUDOSKY
- 27. Une formation Écrire du CSS dans javascript CSS scopé CSS à portée limitée
- 28. Une formation Styled-component Module npm 4M+ téléchargements const Component = styled.div` … `
- 30. Installer le React CLI et démarrer le projet Une formation Sandy LUDOSKY
- 31. Une formation Projet de démarrage ReactJs Npm install
- 32. Projet de démarrage ReactJs const styles = { background: #333; color: white; } const App = () => { return(<div style={styles}> … </div>) }
- 33. Comprendre CSS-in-JS Une formation Sandy LUDOSKY
- 34. Objet de style Combinaison de propriétés CSS et de langage Javascript const styles = { … } const styles = { background: #333 color: white }
- 35. Mettre en forme avec les objets de style Une formation Sandy LUDOSKY
- 36. Mise en forme avec les objets de style const styles = { background: #333; color: white; }
- 37. const styles = { background: #333; color: white; } const App = () => { return(<div style={styles}> … </div>) } Mise en forme avec les objets de style
- 38. Télécharger le projet de démarrage Une formation Sandy LUDOSKY
- 39. Installer les librairies styled-component et react-bootstrap Une formation Sandy LUDOSKY
- 40. Une formation Installer les librairies npm i react-bootstrap npm i styled-component
- 41. const Component = styled.div` … ` import styled from “styled-component”
- 42. const Component = styled.div` background: #333; color: white `
- 43. <div className=”container”> <Component /> </div> const Component = styled.div` background: #333; color: white `
- 44. Découvrir la syntaxe et créer un composant de style Une formation Sandy LUDOSKY
- 45. import styled from “styled-component” const StyledComponent = styled.div` background: #333; color: white; border-radius : 5px; `
- 46. import styled from “styled-component” export default const App = () => { return( <div className=”container”> <StyledComponent /> … </div> ) }
- 47. Personnaliser les composants avec React et styled-component Une formation Sandy LUDOSKY
- 48. import styled from “styled-component” export default const App = () => { return( <div className=”container”> <StyledComponent dark/> … </div> ) }
- 49. import styled from “styled-component” const StyledComponent = styled.div` background: ${props => props.dark ? #333 : white} color: ${props => props.dark ? white : #333 } border-radius : 5px; `
- 50. Importer et personnaliser les composants Bootstrap avec du CSS-in-JS Une formation Sandy LUDOSKY
- 51. import styled from “styled-component” import Button from “react-bootstrap/Button”
- 52. const StyledButton = styled.(Button)` border: none; float:${props => props.right ? 'right': 'default' }; background: ${props => { if (props.dark) { return "#34495e"} return 'white' }}; `
- 53. export default const App = () => { return( <div className=”container”> <StyleButton dark/> … </div> ) }
- 55. Créer une librairie de composants personnalisés et réutilisables Une formation Sandy LUDOSKY
- 56. Une formation Introduction et objectifs Créer un style global createGlobalStyle() Theming Context API ThemeProvider ThemeConsumer HOC : withTheme() hook : useTheme()
- 57. Créer et partager un style global avec createGlobalStyle Une formation Sandy LUDOSKY
- 58. Créer un style global createGlobalStyle() import { createGlobalStyle } from “styled-component” const GlobalStyle = createGlobalStyle` some CSS-in-JS … ` fonction pour créer et retourner un objet de styles globaux
- 59. render( <GlobalStyle props> <App /> </GlobalStyle> ) import { createGlobalStyle } from “styled-component” const GlobalStyle = createGlobalStyle` … ` const props = {} Créer un style global
- 60. Theming Utiliser ThemeProvider et l'accessoire thème Une formation Sandy LUDOSKY
- 61. Une formation Composant pour enrober l’application et transmettre des valeurs et des règles de style globales Theming : ThemeProvider
- 62. import { ThemeProvider } from “styled-component” const theme = { bg: black, fg: white } src/index.js const theme = {...} render( <ThemeProvider theme={theme}> <App /> </ThemeProvider> )
- 64. Une formation Partage de valeurs et de règles de style globales entre composants Theming : ThemeConsumer
- 65. import { ThemeConsumer } from “styled-component” src/App.js const App = () => { return( <ThemeConsumer>{theme => { return(<div {...theme}>{ … }</div>) }} </ThemeConsumer> ) }
- 66. Theming Utiliser le HOC withTheme Une formation Sandy LUDOSKY
- 67. Une formation Composant d’ordre supérieur pour partager la logique entre composants Theming : withTheme
- 68. import { withTheme } from “styled-component” src/App.js const App = ({ theme }) => { return(...) } export default withTheme(App)
- 69. Theming Utiliser le hook useTheme Une formation Sandy LUDOSKY
- 70. Une formation Hook personnalisé pour partager la logique entre composants fonctionnels Theming : useTheme
- 71. import { useTheme } from “styled-component” src/App.js const App = () => { const theme = useTheme() return(<div {...theme}>{ … }</div>) } export default App
- 72. Introduction et objectifs librairie styled-jsx Une formation Sandy LUDOSKY
- 73. Une formation Framework NextJS et les solutions CSS Projet NextJS CSS-in-JS avec styled-jsx Introduction et objectifs
- 74. Découvrir le framework NextJS et les fonctionnalités CSS intégrées Une formation Sandy LUDOSKY
- 75. Une formation Framework React Server-side-rendering CSS-in-JS avec styled-jsx Framework NextJS
- 76. NextJS CLI Créer un nouveau projet et découvrir l'anatomie Une formation Sandy LUDOSKY
- 77. Une formation Démarrer un nouveau projet npm create next-app npx create-next-app <appName>
- 78. Créer des pages et mettre en forme les options CSS-in-JS Une formation Sandy LUDOSKY
- 79. Une formation Les options CSS-in-JS CSS styles/globals.css styles/[component].module.css CSS-in-JS styled-jsx
- 80. Utiliser la librairie styled-jsx Une formation Sandy LUDOSKY
- 81. Une formation Les options CSS-in-JS CSS styles/globals.css styles/[component].module.css CSS-in-JS styled-jsx
- 82. Changer l'apparence des pages avec styled-jsx Une formation Sandy LUDOSKY
- 83. Créer un nouveau projet React Une formation Sandy LUDOSKY
- 84. Mettre en forme avec styled-jsx Une formation Sandy LUDOSKY
- 86. Une formation Bilan Avantages CSS-in-JS architecture ordonnée maintenable scalable