Component-Based Architecture
A component is a modular, portable, replaceable, and reusable set of well-defined functionality that encapsulates its implementation and exporting it as a higher-level interface. Component-Based Architecture
There are three different views of a component:
- Object-oriented view.
- Conventional view.
- Process-related view.
The characteristics of components are reusability, replaceable, not context specific, extensible, encapsulated , and independent.
- Reusability: Components can be reused in different situations in different applications.
- Replaceable: Components may be freely substituted with other similar components.
- Not context specific: Components are designed to operate in different environments and contexts.
- Extensible: A component can be extended from existing components to provide new behavior.
The advantages of using component based architecture are ease of deployment, reduced cost, ease of development, reusable, odification of technical complexity, reliability, system maintenance and evolution, and independent.
What is Props and How to Use it in React
Props is a special word in react, which stands for properties. And props data is read-only, which means that data coming from the parent should not be changed by child components.
There are three steps to use props:
- Define an attribute and its value(data).
- Pass it to child component(s) by using Props.
- Render the Props Data.
Props can only be used in an uni-directional flow (from parent to child).
React Tutorial through ‘Passing Data Through Props
React is JavaScript library for building user interfaces.
Components are a small pieces of code.
JSX is a special syntax, most react developers use it.
ReactDOM.render() is used to render a React element into a root DOM node.
renderSquare method, change the code to pass a prop called value to the Square.
Kinds of components:
- React.Compnent.
- ShoppingList.