Introduction to React.js: Understanding the Basics
React.js, often referred to simply as React, is a powerful JavaScript library developed by Facebook for building user interfaces, particularly for single-page applications. Since its release in 2013, React has gained immense popularity in the web development community due to its efficiency, flexibility, and ease of use.
One of the standout features of React is its use of a virtual DOM (Document Object Model). The virtual DOM is a lightweight representation of the actual DOM in the browser. When the state of a component changes, React updates the virtual DOM first, calculates the most efficient way to update the real DOM, and then makes those changes. This approach significantly enhances performance, especially in applications with a lot of dynamic content.
What are React Components
React components are the building blocks of a React application. Think of them as small, reusable pieces of code that define a part of the user interface (UI). Each component is like a Lego block that you can piece together to build complex UIs.
There are two main types of React Components: Functional & Class Components
Functional Components:
These are simple JavaScript functions that return HTML (in the form of JSX).
In the above example we have a Card Functional Component. In this Component we a returning a HTML Div element that represents a Card. Above the return statement is where the logic goes for your Component.
Class Components:
These are ES6 classes that extend from React.Component and have a render method that returns HTML (in the form of JSX). However, with the introduction of Hooks in React, functional components have become more popular.
What are React Props:
In React, "props" (short for properties) are used to pass data from one component to another, typically from a parent component to a child component. Props are read-only and immutable, meaning that a component receiving props cannot modify them. This ensures a one-way data flow and makes your application easier to understand and debug. Props uses Key-Value pairs just like JavaScript Objects.
How props work:
Props are passed to components similarly to how arguments are passed to functions. When you define a component, you can specify what props it expects, and then you use those props within the component.
Here's a simple example to illustrate how props work:
In the example above we are passing the Key "name, age, isStudent" with the values of "Ethan, 20, true" into the Student Component.
In this example we are getting "name, age, isStudent" that was passed through the component in the App and we saving it as "props" just like we would with arguments in functions. Then we accessing the "name" value from the "props" and returning it in the HTML.
What are States?
In React, state is a built-in object that allows components to create and manage their own data. State is mutable, meaning it can be changed over time, and changes to the state will cause the component to re-render, updating the UI to reflect the new state. Unlike props, which are passed to the component and are immutable, state is managed within the component. In C# terms a state is basically "OnPropertyChanged()".
useState() Hook:
useState is a React Hook that allows functional components to add and manage state. It is one of the most commonly used Hooks in React and is used to introduce statefulness to functional components without the need for class components. In simple terms its a function that allows functional components to use React features without writing class components. Allows the creation of a staeful variable and a setter function to update its value in the V.DOM
In the above code snippet i am importing useState. Destructing the useState into a array with "count & setCount", be default i am setting the count variable to 0. The setCount methods updates the count and i just made a simple counter app with useState to change the value of the "count" variable on a button click.
Kommentare