Le CSS-in-JS est une technique de style par laquelle JavaScript est utilisé pour styliser les composants. Nous allons donc apprendre à personnaliser les composants de nos applications avec des propriétés CSS combinées au langage javascript. Il ne s’agit pas d’un cours pour apprendre les bases du CSS, mais conçu pour découvrir la syntaxe et les méthodes du CSS-in-JS. Les objectifs du cours sont d’apprendre à : - Maîtriser la syntaxe de CSS-in-JS pour créer des objets de style - Apprendre à personnaliser les composants avec les solutions CSS intégrées : les librairies styled-components et styled-jsx - Et apprendre à repousser les limites du CSS avec une syntaxe plus riche et plus flexible Les points forts de la formation Ce sont plusieurs présentations de frameworks populaires du développement web moderne. ReactJS et NextJS bénéficient tous les deux d’une solide réputation dans la communauté web et offrent plusieurs avantages tels que : - Le démarrage rapide et facile des projets de développement grâce aux outils et interfaces de ligne de commande - Une accélération du processus de développement et des solutions de développement intégrées On apprend par la pratique avec plusieurs exemples et exercices pour monter très vite en compétence. Contenu de la formation Au programme de la formation, on apprend : - Les méthodes et les solutions de CSS moderne avec les grilles CSS et les boîtes flexibles - Les techniques du CSS-in-JS pour combiner la syntaxe des feuilles de style CSS et les expressions JavaScript - Ensuite, on découvre les librairies styled-components et styled-jsx, qui sont des librairies front open-source pour créer des composants de styles Résultats attendus - Apprendre les solutions et les avantages du CSS moderne - Découvrir et utiliser les librairies qui fournissent des solutions intégrées et prêtes à l’emploi - Développer et améliorer ses compétences de développement front - Écrire du meilleur CSS, plus riche et plus flexible - Créer des composants de style flexibles, réutilisables et facilement maintenables À la fin de ce cours, les apprenants auront appris les techniques et les méthodes de CSS modulaire recommandées par les professionnels et experts de la communauté. Modalités pédagogiques Les fichiers d’exercices et autres supports pédagogiques sont mis à la disposition de tous les apprenants qui rejoignent le cours.

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é

5. Connaissances requises
ReactJS ⚛
Bootstrap

6. Une formation
Connaissances requises

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

11. Visual Studio Code

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`
…
`

29. Une formation
Styled-jsx
<style jsx>
{`
….
`}
</style>

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>
)
}

54. Personnaliser
avec styled-component
Une formation
Sandy LUDOSKY

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>
)

63. Theming
Utiliser ThemeConsumer
Une formation
Sandy LUDOSKY

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

85. Conclusion
Une formation
Sandy LUDOSKY

86. Une formation
Bilan
Avantages CSS-in-JS
architecture ordonnée
maintenable
scalable

87. Prochaine formation