Nothing Small about Components

If you are going to be learning about React you will certainly be going into components. When setting up your application we can take apart the page based on what "role" each part serves. These “roles” can range from displaying a title, writing out data, a list to display and so on. By utilizing components we can keep our code dry and organized in a simple to understand manner.
When using components in a standard manner, we basically use them to perform some type of function and then return a specified output to have it rendered within the DOM. Let us look at an example.

import Blog from “./Blog”;
Import Comment from “./Comment”


function App() {
const blogData = {
  title: "Nothing Small about Components",
  about: "A blog about learning components",
  likes: 5
};


  return (
    <div>
      <Blog blogData = {blogData}/>
      <Comment />
    <
    </div>
  );

export default App;

function Blog({blogData}) {

let text = "";

function displayStars({blogData.likes}){
    for (let star = 0; star < {blogData.likes}; star++) {

    text += "*"
  }
  console.log(text)
}

 return (
    <article>
        <h3>{blogData.title}</h3>
        <small>{displayStars()}</small>
        <p>{blogData.about}</p>
    </article>
)
export default Blog;

function Comment (){
    return(
       <small>
          <ul>
        <li>This is cool! -AmusedReader234</li>
        <li>Wow! -FasinatedGuy3</li>
        <li>Need more of this! -Leeroy J.</li>
          </ul>  
       </small>
     )
}

export default Comment;

Let’s go through this step-by-step, when you create a new file in your code editing software it is standard practice to have the main body of your application to be written in a particular component called this is where all the components typically come together to make the main page. In this we first see it declared as a function, the syntax and functionality are similar but for components the name of it is always upper case and the return will be in the form of html elements. For the return of it will present the html elements that belong to components and respectively. Here these two components are referred to as ‘child’ components of as their returns will be presented onto directly.
Now, what do and display? Let’s look at the order and go from there, the code will display the result of first so whatever is happening there is run and presented before . So we go to the component first and see what it does. In the code we see that the component has a function that will impact the return of the html and see that it takes blogData from somewhere. Well blogData originally comes from and it is passed down to the ‘child’ component through the use of props. In the code for it will return the blogData there is the prop to be used within . In the file for it will be written like however it also has a prop where a parameter would be, function Blog({blogData}), Now has the information of the object declared in and can make use of it. now will display the title, run the function written within the component and finally the about. So can receive and manipulate the data to display it and then export it back to so that it can present the html.
In we are not passing down any props so it will basically present what it possesses without outside influence. Here it will simply return the list of comments by readers and again export it back to .

In the end our code will look something like this :

From the title, to the function displaying the likes in the form of '*', the description, and finally to the list of comments all of the 'roles' we were talking about all gathered to form this piece. Hopefully, this has shown that components will become major parts of organizing and presenting code in an understanding manner on your path as a programmer.