Introduction To React
For this Blog i will be going over the importance of Components & Props in the world of React. So what exactly is React?? Well React was first introduced back in May 2013. Surpassing other front-end libraries to become the most commonly used library for web development. React is a free and open-source front-end JavaScript library for building user-interfaces(UI) based on components, React organizes UI into reusable components, making it easier to manage and maintain large-scale applications. Very Important to learn early on that React is NOT a programming language. React uses JSX, which is a syntax extension that allows developers to write HTML-like code within JavaScript. JSX is a mix of JavaScript and XML. Having one of the largest ecosystems of libraries, tools, and community support, making it so much easier for developers to build and scale complex applications.
Components Basics
Step 1
Lets create some components to better understand this concept.
From the example above we were able to declare a couple of functions called "Sport,Team, TopThreePlayers". Now i know it seems a bit confusing but lets go over what we see. When using React one of the first things you may notice is that the function names start with a capital and not a lower case. Something else you will learn quickly is that JSX functions can only take in one argument which are usually props. When using functions in react they must have a return statement. React takes in JavaScript code and also interpreting JSX’s special syntax within the return() statement, But now lets utilize then functions so they can have some use.
So with all 3 of the components that were written out by implementing those components within a return statement. We can see that Sport(),Team(), TopThreePlayers() are being used inside the App() return statement. App is our top level component and Sport,Team,TopThreePlayers are lower. If it were to be displayed and turned into HTML App would be the parent and Sport,Team,TopThreePlayers would be the child component.
A quick fun fact: Writing our functions starting off in Capital Letters and not CamelCase is necessary because it helps react differentiate between regular JavaScript and React components and it is a must to follow this syntax in order for React to work properly and render in the components.
Props Basics
React props is short for properties and they are essentially function arguments with some attributes in HTML. In order to send down a props into a component, you must use syntax as HTML attributes. To simplify it they are a way of passing data from parent components to child components, The only way for a parent component to pass data to its child components is via props. They are immutable and are used to communicate between components. Props are similar to function arguments in JavaScript. Fun fact: They can be any data type, for example we can pass "strings, numbers, booleans, object, and functions" as props.
Example:
In the example above the prop has been sent down to the component and receives it. Props are fundamental in using react for passing data down from one component to another. So from the example above in the provided code snippet, a React component named Fruit is defined. This component takes a prop named fruit and renders a message indicating the favorite fruit.
Summary
React, a powerful JavaScript library for building user-interfaces(UI), revolves around the concept of components and props. Components are modular, reusable pieces of code that encapsulate specific UI elements and functionalities. Props, short for properties,They enable customization and configuration of components. By passing props down the component hierarchy, data and behaviors can be efficiently communicated between different parts of the application, enabling seamless interaction and data flow. Components and props promote code organization, reusability, and maintainability, making React a popular choice for developing modern web applications.
Resources
https://legacy.reactjs.org/docs/components-and-props.html
https://react.dev/learn/passing-props-to-a-component
https://www.w3schools.com/react/react_components.asp
Top comments (0)