You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
• React is a JavaScript library for building fast and friendly user interfaces.
19
+
20
+
o React is used to build user interfaces
21
+
• Developed by Facebook in 2011, it is currently the most popular library for building user interfaces.
22
+
23
+
o At the heart of React are components
24
+
• A component is a piece of the UI.
25
+
• When building application with React, you are building independent, isolated, and reusable components and then composing them to build complex interfaces.
26
+
27
+
o Every React application has at least one component called the root component.
28
+
• This root component represents the entire application and contains other child components.
29
+
30
+
o Every React Application is a tree of components.
31
+
• For example, if you had an application like twitter, you would have a bunch of components, including: Navigation bar, Profile, Trends section, Tweet feed, etc.
32
+
• If you think of the components above like a tree, it would look something like this:
33
+
Each component above is a piece of UI.
34
+
Each component can be built in isolation and then put together to create complex user interfaces.
35
+
36
+
o Components are typically implemented as a class
37
+
• Each of these classes has a state and a render method.
38
+
The state is the data we want to display when the data is rendered.
39
+
The render method describes what the UI should look like.
40
+
41
+
o The output of the render is a React Element.
42
+
43
+
class Tweet {
44
+
state = {}; // data to be displayed when rendered.
45
+
render() { // output rendered as a React Element.
46
+
47
+
}
48
+
}
49
+
50
+
o A React element is simple JavaScript object that’s maps the DOM element.
51
+
• It is NOT a DOM element, it only represents the DOM element in the memory.
52
+
• The react element is essentially a lightweight representation of the DOM in memory which is referred to as the virtual DOM.
53
+
• Unlike the real DOM, the virtual DOM is cheap to create.
54
+
• When you change the state of an element, you create a NEW element.
55
+
• React will then compare this new element and its children of the previous one, figures out what is changed, then updates a part of the real DOM to keep it in sync with the virtual DOM.
56
+
• This means that when building applications with React, unlike vanilla JavaScript and jQuery, you don’t have to work with DOM API in the browser.
57
+
In other words, you don’t have to write code to query and manipulate the code or attach event handlers.
58
+
With react, you simply change the state of the components and React will automatically update the DOM to match that state.
59
+
60
+
o React is called React because it “reacts” to state changes.
61
+
• When the state changes, React will “react” to the state change and update the DOM.
62
+
• React only takes care of rendering the view and making sure that the view is in sync with the state… that’s all React does.
63
+
• Because of this, the API is small and very easy to learn.
64
+
• With React, you need to use other libraries or things like routing or calling HTTP services.
0 commit comments