Télécharger en tant que PDF, PPTX
![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)
Téléchargé parAlphorm
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Component & Styled-jsx
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.
Alphorm.com Formation Améliorer le développement avec CSS-in-JS _ Styled Component & Styled-jsx
- 1. Formation Améliorer le développementavec CSS-in-JS Styled Component & Styled-jsx Une formation Sandy LUDOSKY
- 2.
- 3. Une formation Introduction 1. Premierpas 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é
- 5.
- 6.
- 8. Présentation du projet Uneformation Sandy LUDOSKY
- 9. Une formation Présentation desoutils Visual Studio Code Navigateur moderne React Developer Tools
- 10. Ressources et outils Uneformation Sandy LUDOSKY
- 11.
- 12.
- 13.
- 14. Une formation Les fichierstéléchargeables 📁 Version de démarrage Version finale Ressources
- 15. Découvrir les fondements etles 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 duCSS CSS 1.0 => CSS 2.0 => CSS 2.1 CSS 3
- 18. Utilités du CSS Miseen forme et habillage page web Métiers du web et numérique Photo by Campaign Creators on Unsplash
- 19. Photo by AlexKotliarskyi on Unsplash Utilités du CSS
- 20. Photo by UXIndonesia on Unsplash Utilités du CSS
- 21. Photo by ЯрославАлексеенко on Unsplash Photo by Brett Jordan on Unsplash CSS
- 22. Découvrir les solutions duCSS moderne Une formation Sandy LUDOSKY
- 23. Une formation Les solutionsCSS moderne La grille CSS & Flexbox Les librairies & frameworks CSS-in-JS
- 24. Écrire du CSSdans javascript Une formation Sandy LUDOSKY
- 25. Une formation Écrire duCSS dans javascript Installation Aucune Syntaxe const styles = { … }
- 26. Écrire du CSSmodulaire avec styled JSX et styled component Une formation Sandy LUDOSKY
- 27. Une formation Écrire duCSS dans javascript CSS scopé CSS à portée limitée
- 28. Une formation Styled-component Module npm 4M+téléchargements const Component = styled.div` … `
- 29.
- 30. Installer le ReactCLI et démarrer le projet Une formation Sandy LUDOSKY
- 31. Une formation Projet dedémarrage ReactJs Npm install
- 32. Projet de démarrageReactJs const styles = { background: #333; color: white; } const App = () => { return(<div style={styles}> … </div>) }
- 33.
- 34. Objet de style Combinaisonde propriétés CSS et de langage Javascript const styles = { … } const styles = { background: #333 color: white }
- 35. Mettre en forme avecles objets de style Une formation Sandy LUDOSKY
- 36. Mise en formeavec 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 dedémarrage Une formation Sandy LUDOSKY
- 39. Installer les librairies styled-componentet react-bootstrap Une formation Sandy LUDOSKY
- 40. Une formation Installer leslibrairies 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> constComponent = styled.div` background: #333; color: white `
- 44. Découvrir la syntaxe etcré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 avecReact 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 personnaliserles 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 constApp = () => { return( <div className=”container”> <StyleButton dark/> … </div> ) }
- 54.
- 55. Créer une librairiede composants personnalisés et réutilisables Une formation Sandy LUDOSKY
- 56. Une formation Introduction etobjectifs Créer un style global createGlobalStyle() Theming Context API ThemeProvider ThemeConsumer HOC : withTheme() hook : useTheme()
- 57. Créer et partagerun style global avec createGlobalStyle Une formation Sandy LUDOSKY
- 58. Créer un styleglobal 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'accessoirethème Une formation Sandy LUDOSKY
- 61. Une formation Composant pourenrober 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> )
- 63.
- 64. Une formation Partage devaleurs 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 HOCwithTheme Une formation Sandy LUDOSKY
- 67. Une formation Composant d’ordresupé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 hookuseTheme 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 librairiestyled-jsx Une formation Sandy LUDOSKY
- 73. Une formation Framework NextJSet les solutions CSS Projet NextJS CSS-in-JS avec styled-jsx Introduction et objectifs
- 74. Découvrir le frameworkNextJS et les fonctionnalités CSS intégrées Une formation Sandy LUDOSKY
- 75. Une formation Framework React Server-side-rendering CSS-in-JSavec styled-jsx Framework NextJS
- 76. NextJS CLI Créer unnouveau projet et découvrir l'anatomie Une formation Sandy LUDOSKY
- 77. Une formation Démarrer unnouveau projet npm create next-app npx create-next-app <appName>
- 78. Créer des pageset mettre en forme les options CSS-in-JS Une formation Sandy LUDOSKY
- 79. Une formation Les optionsCSS-in-JS CSS styles/globals.css styles/[component].module.css CSS-in-JS styled-jsx
- 80. Utiliser la librairiestyled-jsx Une formation Sandy LUDOSKY
- 81. Une formation Les optionsCSS-in-JS CSS styles/globals.css styles/[component].module.css CSS-in-JS styled-jsx
- 82. Changer l'apparence des pagesavec styled-jsx Une formation Sandy LUDOSKY
- 83. Créer un nouveauprojet React Une formation Sandy LUDOSKY
- 84. Mettre en forme avecstyled-jsx Une formation Sandy LUDOSKY
- 85.
- 86. Une formation Bilan Avantages CSS-in-JS architectureordonnée maintenable scalable
- 87.