This is important because…
there is a easier, faster, more managable method of building sites and apps that can result in less errors.
A method of segmenting a project into smaller, more manageable logical pieces. Component reusability is a vital part of component based architecture, as it combines functionality with repeated use cases (reduces time in development; increases reliability).
Recognized standard component frameworks include, but not limited to; COM/DCOM, JavaBean, EJB, COBRA, .NET, web / grid services.
The block.
Components are modular, replaceable, and reusable software objects that are constructed ahead of time with the intention of working with other components.
Software components may be defined as a ‘unit of composition’.
Below is an example of a components structure, with a component being plugged inside.
Note that the Product component must be imported first before being used. The syntax to invoke/plug the component becomes <Product />.
App itself becomes a component we can later reuse and we allow this by opening the door through export.
import Product from "./Product"
function App() {
return (
<div>
<h1>PRODUCTS</h1>
<div className="App">
<Product />
</div>
</div>
)
}
export default App
Source: freeCodeCamp
The three different views of a component are as follows; object-oriented view, conventional view, and process-related view.
Object-oriented view
Multiple components working together as part of cooperating class(es). Problem domain and infrastructure class(es) (analysis, design; respectively), identify tributes and operations of the current implementation; interface definition that allow classes to communicate and cooperate.
Components are self-managed, individuals; objects with their own logic and data; all interaction is done through the interface they define (methods/props).
Conventional view
Components are seen as parts (elements, module, etc.) brought together and adapted to fit into something bigger; their encompassing logic, internal structure for logic to be processed, and interface that allows functionality and data processing.
More abstract take on components; they do their job however they see fit and we don’t ask questions. Systems become easier to understand and maintain, because there is a separation of concerns and less micromanaging.
Process-related view
Components are built from system library based on the context.
Keeps the flow in mind, start-to-finish. Helps to understand flow of data and interactions, and can be critical for debugging and overall system design.
Reusability - designed to be re-used across situations / applications, but can be task-specific. Replaceable - interchangeable with other similar components. Extensible - functionality/structure can be expanded upon original scope. Encapsulated - code block is contained within itself and rarely depend on other components.
“The design of data structures, interfaces, and algorithms should conform to well-established guidelines to help us avoid the introduction of errors.” - tutorialspoint
Labels/data you attach to the block.
Props are objects and are used to pass data and values between components that return dynamic and unique outputs.
When building with React, common occurrence for sites to have similar design patterns throughout their sections, only with different data, which is done through the use props, which build on the concept and use of components.
Props are inputs, methods of adding data into components, which they (components) can then use to expand upon the data they contain.
Data flow is one way, from parent component to child component. The child component also can not change or modify the data passed from the parent.
To send props into a component, the syntax looks very similar to how attributes (class, id, etc.) are integrated to HTML elements. The syntax to send props can look a little something like,
<Greeting name="you" age={1} />
and can have more than one property defined (name, age, etc.).
Within the component receiving, we can now integrate the prop like so,
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
resulting in Hello, you!.
A feature that allows the reassignment of data from objects or arrays to variables (think Constructor and how properties are defined in the initial parenthesis, only curly braces for this method). This method eliminates the need to use the props. prefix.
two different examples (within body, within parameters), in relation to our earlier example of <Product /> are as follows;
function Product = (props) => {
//First Step: Destructuring within the body of the function
const { img, name, desc, price} = props ;
return (
<div>
<img src={img} alt="products" />
//Second Step: receive the properties where you need them by stating the names of the properties without attaching the prefix ‘props.’
<h4>{name}</h4>
<p>{description}</p>
<h4>{price}</h4>
</div>
);
}
export default Product
//First Step: Destructuring within function's parameter
function Product = ({ img, name, desc, price}) => {
return (
<div>
<img src={img} alt="products" />
//Second Step: receive the properties where you need them by stating the names of the properties without attaching the prefix ‘props.’
<h4>{name}</h4>
<p>{description}</p>
<h4>{price}</h4>
</div>
);
}
export default Product
All this with the goal of making code more readable.
{} is used to embed JS, and attribute use camelCase.props..