react presentation basic

2. Introduction to React

3. What is
React?
• React is a JavaScript framework
• Used for front end web development
• Think of jQuery, but more structured
• Created and used by Facebook
• Famous for implementing a virtual
dom

4. Timeline of front-end JavaScript frameworks
jQuery*
(2006)
AngularJS
(2010)
React
(2013)
Vue
(2014)
Angular
(2014)
* jQuery is more often considered a library than a
framework

5. Common tasks in front-end development
Data definition, organization, and
storage
Event handlers respond to user
actions
Design and render HTML templates
Resolve URLs
Interact with server(s) through APIs and AJAX
App state
User actions
Template
s
Routing
Data

6. Fundamentals of
React
1. JavaScript and HTML in the same file
(JSX)
1. Embrace functional programming
1. Components everywhere

7. JavaScript and HTML in the same
file
Traditiona
l
approach
React
approach
HTML CSS JS JSX CSS or JSS

8. JSX: the React programming
language
const first = "Aaron";
const last =
"Smith";
const name = <span>{first} {last}</span>;
const listWithTitle = (
<>
<h1>COMP 523</h1>
<ul>
<li>Dr. David Stotts</li>
<li>{name}</li>
</ul>
</>
);
const list = (
<ul>
<li>Dr. David Stotts</li>
<li>{name}</li>
</ul>
);

9. “React is just
JavaScript”

10. Functional
programming
1. Functions are “first class
citizens”
1. Variables are immutable
1. Functions have no side effects

11. Functional
programming
Functions are “first class
citizens”
let add = function() {
console.log('Now adding numbers');
const five = 3 + 2;
};
function performTask(task) {
task();
console.log('Task performed!');
}
performTask(add);
function foo() {
return function() {
console.log('What gets printed?');
};
}
foo
foo();
foo()();

12. Functional
programming
Variables are
immutable
let a = 4;
a = 2; // Mutates `a`
let b = [1, 2, 3];
b.push(4); // Mutates `b`
let c = [...b, 4]; // Does not mutate `b`

13. Functional
programming
Functions have no side
effects
const b = [];
function hasSideEffects() {
b = [0];
}

14. Component
s
Components are functions for user
interfaces
let y = f(x);
Input x Output number
let y = <FancyDiv value={x} />;
Input x Output HTML
Math function:
Component function:

16. Anatomy of a React
component
export default function MyComponent(props) {
return <div>Hello, world! My name is {props.name}</div>;
}
const html = <MyComponent name="aaron" />;
Inputs are passed through a
single argument called
“props”
The function is executed as
if it was an HTML tag
The function
outputs HTML
The component is
just a function
Parameters are passed
in as HTML attributes

17. Component
rendering
• When a component function executes, we say it
“renders”
• Assume components may re-render at any time
Our job is to ensure that
every time the component re-
renders, the correct output is
produced

18. “In React, everything is a
component”

19. Todo
application Title
TodoForm
First step:
▪ mockup / wireframe
TodoList
Todo
Big idea:
▪ A digital to-do list

20. Creating a new React
app
Creating a new React app is simple!
1. Install Node.js
2. Run: npx create-react-app app-name
3. New app created in folder: ./app-name

21. Anatomy of a new React app
public est souvent utilisé pour
contenir le document HTML initial et d'autres
ressources statiques nécessaires à
l'application
App est un composant
de démarrage
index.js lie React
au DOM
package.json configure les
dépendances npm

22. What are
hooks?
useState
useEffect
We will
cover
these today
Built-in hooks:
Hooks: Fonctions spéciales permettant aux
développeurs de se connecter à l'état et
au cycle de vie des composants React.
State: Gère les données dynamiques
d'un composant et détermine son
comportement et son apparence.
Lifecycle: Les événements associés à une
instance de composant React
(création, rendu, destruction, etc.).

23. First React hook:
useState
Purpose:
1. Mémoriser les valeurs en interne lorsque le composant se rend à nouveau
2. Indiquer à React de rendre à nouveau le composant lorsque la valeur change.
Syntax:
const [val, setVal] = useState(100);
The current value A setter function
to change the
The initial
value to

24. Predicting component re-
rendering
A component will only re-render
when…
1. A value inside props changes
– or –
2. A useState setter is called

25. useEffect
"useEffect" dans React permet d'effectuer des effets de bord dans les composants
fonctionnels, comme la gestion des abonnements aux données ou des actions
asynchrones, en spécifiant quand ces effets doivent être exécutés.
Syntax:
useEffect(() => {
console.log(`myValue was changed! New value: ${myValue}`);
}, [myValue]);
A list of values such that
changes should trigger this
The code to run when
values change

26. La "Virtual DOM" (DOM virtuel) est une technique utilisée par React pour
améliorer l'efficacité des mises à jour d'interface utilisateur. Elle consiste à
créer une représentation virtuelle de l'arbre DOM existant en mémoire, puis à
la comparer avec la version précédente pour identifier les changements. Ces
changements sont ensuite appliqués de manière sélective à l'arbre DOM réel,
réduisant ainsi le coût des opérations de manipulation du DOM. La "Virtual
DOM" permet d'optimiser les performances des applications React en
minimisant le nombre d'opérations directes sur le DOM, ce qui contribue à
une expérience utilisateur plus réactive.
La Virtual DOM de React : Optimisation des performances
d'interface utilisateur."

28. Merci pour votre attention