How do we, as web developers create dynamic and engaging web applications in a fast and efficient manner? In order to do this, one of the biggest tools in our arsenal is by using existing external libraries in our applications. When it comes to web development, there are many frontend libraries that are available for us, but one has surpassed others in popularity and demand.
What is React?
React is an open-source JavaScript-based UI development library created and maintained by Meta (Facebook). This library first appeared in 2013 and has quickly developed into one of the most commonly used frontend libraries for web development. Some reasons for the increase in React's popularity are:
- Ease of creating dynamic applications
- Improved performance
- Reusable components
- Unidirectional data flow
Today we will discuss the last two points. What are React components and how is data passed between them?
React Components
Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their own logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
Creating Components
One thing we need to recognize when dealing with React Components is they share a parent-child relationship. This relationship tells React how and what to render to the DOM. When creating a React application the first component that is made is traditionally called App with all of the child components returned inside of the App component.
In our example above we can see that our App component has three child components:
- Header
- About
- ArticleList
As we can see, each of these child components all have different different responsibilities within our application. Our Header component is responsible for displaying the name, About is responsible for displaying the logo and the about text of our application and the ArticleList component is responsible for creating another component (Article) and displaying information for each article.
When it comes to describing React components in JavaScript terms, a React component is just a JavaScript function. In JavaScript, functions are meant to handle a small portion of the overall applications functionality. In React, components work the same way. One difference between a JavaScript function and a React component is their syntax. If you notice in the code snippets above, each of our components start with a capital letter. This tells React that this function is a React component instead of a JavaScript function and are considered Functional Components in React.
There is another kind of component in React called Class Components, however for the purpose of this article I will not be reviewing them and will leave a link at the bottom for further information.
Properties in React
Props in React, short for properties, allows information to be passed to our components. These props help make the components more dynamic. Remember that one of the reasons React is popular is the fact that information is unidirectional and that React components share a parent-child relationship. This means that data can only flow down from a parent component to its child components. The way to do this is through Props.
Creating Props
As stated, props are passed down from parent components their child components in React. The child components takes in those props as arguments that can be used within that component.
To create a prop in react we first need to identify which component will be the parent and which one(s) will be the children. In our example we have App being the parent component of our Header, About and ArticleList components, then ArticleList being the parent of our Article component.
When we look at our example, our Header component needs the name of our blog, the About component needs the image and about text of our blog and our ArticleList component needs the information about our articles. We are able to pass this information down by assign each of these a variable in our App component and setting it equal to the data we want:
From here these variables are taken in by our components via arguments that contain the data we want to use.
Our ArticleList component is also the parent of our Article component which passes down individual article elements to Article via props.
ArticleList passes down the article key, title, date, and preview data into our Article component. Similarly, Article takes in these props as arguments and uses them within its own component.
With all of our components created and information flowing in the correct manner, we have been able to create a fully functioning website!
Top comments (0)