In the below image, the Navbar, Carousal, Services and so on are all components. What happens if you don't capitalize the first letter of a component name? There will be an ambiguity, whether it is an HTML tag or a React component. This convention is used to distinguish between a React component and a regular HTML tag. On a high level, the whole component structure looks like a tree with the root node as App.Īlso keep in mind that component names have their first letter capitalized. Any custom component that you write is going to be a direct or indirect child of the App component in React. Now comes a big question: if components are going to be nested like we mentioned, what is the topmost component? It's the component (provided by React). That is, we can nest any number of components inside other components. Of course you can reuse the component, which in turn is a collection of many components. Card Component reused multiple timesĬongrats if you thought of this! The four components are written inside another component called Home (since the function name is Home, ). (Stick to the former notation, since it's more common). Keep in mind that, writing is equivalent to. We are reusing the Card component ( ) four times. That is exactly what we are doing in the below image. As mentioned earlier, functions or components can be reused any number of times. The above image represents a component called Card (since the function name is Card).
Hang in there, we will come to that in a second.
Relax now componentes code#
Don't get confused with the code in the below images, as we are using a mix of HTML and JavaScript. What are the main advantages of functions? Reusability, abstraction, and avoiding redundant code, right? Think of a component like a regular function in any programming language. A web page is a collection of components. So let's dive into the two main features of ReactJS that we're gonna discuss today, namely its component-based approach and declarative views.Įverything in React is a component. Now hopefully you have a clear understanding of the browser DOM.
The below image shows the equivalent conceptual tree structure of the DOM: Browser DOM tree Any HTML tag you write is going to be a direct or indirect child of the root node document. Are you wondering where this document node came from? Well, it's part of the browser. Now, any tree must have a root node, right? Here, the root node is document. This means that the DOM enables JavaScript to access and modify the web page easily.
Relax now componentes update#
With JavaScript, we can access any of these nodes (HTML elements) and update their styles, attributes, and so on. Any piece of HTML that we write is added as a node, to this tree. The DOM (Document Object Model) represents the web page as a tree structure. Before moving on and learning more about these features, we must clearly understand the browser DOM. Of course there is more to React than this, but we'll focus on these two features here. So what makes React so popular rather than just using vanilla HTML, CSS, and JavaScript? For that, let's first look at the 2 main features of React: Now, the common question that comes to everyone's mind is do we really need a JavaScript library, just for creating user interfaces? We can do the same using just HTML and CSS, right? It was created by Facebook back in 2013.ĭemand for React developers is skyrocketing, which means that having knowledge of this library is definitely going to be worth it! Some of the popular websites built using ReactJS include Dropbox, Netflix, and Instacart – and the list goes on. React.js is an open source JavaScript library for creating user interfaces.
0 kommentar(er)
