Cheat sheet: Components and state
The 29 terms of this lesson, part by part, with the French word a team in France would use.
1. What a framework adds
- Frameworkframework
- ready-made code, such as React, Vue or Svelte, that redraws the screen from the state automatically.
- Componentcomposant
- a reusable piece of a page, such as a button or a card, designed once and used everywhere.
- Stateétat
- the data that a page keeps in one place, such as the number of passengers, from which the screen is drawn.
- Renderrendu
- to draw the screen again from the state, so that every part that shows the data is up to date.
2. Components
- Componentcomposant
- a reusable piece of a page, such as a button or a card, designed once and used everywhere.
- Propsprops, propriétés
- the data that one use of a component receives, such as the number of stars and of reviews.
- Screen readerlecteur d'écran
- software that reads a page aloud, so that blind people and people with poor sight can use it.
- Component librarybibliothèque de composants
- the set of all the components of a site, each with its variants and states.
3. State, and where it lives
- Stateétat
- the data that a page keeps in one place, such as the number of passengers, from which the screen is drawn.
- URLURL, adresse web
- the full address of a page, such as https://www.sncf-connect.com/app/home/search.
- Local storagestockage local
- a place in the browser where a page keeps small things, such as a dark mode choice, on this device only.
- Routerrouteur
- the part of a framework that links each address to a screen, and can keep state in the address.
4. The same feature in plain JavaScript and in React
- ReactReact
- a popular JavaScript tool that builds only the part of a site that runs in the browser.
- addEventListeneraddEventListener
- the JavaScript instruction that creates an event listener, as in
button.addEventListener("click", …). - textContenttextContent
- the JavaScript instruction that sets the text of an element, shown exactly as written, even if it contains tags.
- useStateuseState
- the React instruction that creates a piece of state and the only function allowed to change it.
- JSXJSX
- the way React components describe the screen, with tags that look like HTML mixed into the JavaScript.
5. The same feature in Vue and in Svelte
- VueVue.js
- a framework for building interfaces from components, created by Evan You and maintained by an independent team.
- SvelteSvelte
- a framework that turns its components into plain JavaScript before the site goes online, so it sends less code.
- Templategabarit, template
- a page layout with empty places that a program fills with data, such as a name or a price.
- Compilercompilateur
- a program that turns code written by developers into another form, such as plain JavaScript that browsers run.
6. Reading a framework project
- package.jsonpackage.json
- the file at the top of a JavaScript project that lists every package it uses, with its version.
- Dependencydépendance
- code written by other people that a project uses, and that must be updated regularly.
- TypeScriptTypeScript
- JavaScript with labels that say what kind of data each value holds, so that more mistakes are caught early.
- Pull requestpull request, demande de fusion
- a change proposed for review before it joins the live site, with the list of what changed.
7. What to ask
- Componentcomposant
- a reusable piece of a page, such as a button or a card, designed once and used everywhere.
- Stateétat
- the data that a page keeps in one place, such as the number of passengers, from which the screen is drawn.
- Versionversion
- one numbered release of a package or a tool, such as 5.2.1, where higher numbers are newer.
- FigmaFigma
- the online design tool that most designers use to draw mockups and components.
Web Technologies · Front ends · wt.thomasjuldo.com/course/front-ends/components-and-state