React is a library that allows you to build web applications very quickly using components. React views a website as different components that are rendered on a website. Depending on how you define the components you can encapsulate data within each component and then determine how they function together when rendered on the website. React Docs published by Facebook gives a good example of this.
Step #1: Determine the components we will be using based on what each component is responsible for.
Each color represents a component on the website as it is designed for a particular task such as rendering certain information or the ability for a user to interact with the website using the search option. In this example each color represents a different component. Each component is responsible for something different but they work together to help generate one whole webpage!
The above example has five components. Here are the list of the components and what each one is responsible for.
FilterableProductTable(orange): contains the entirety of the exampleSearchBar(blue): receives all user inputProductTable(green): displays and filters the data collection based on user inputProductCategoryRow(turquoise): displays a heading for each categoryProductRow(red): displays a row for each product
Step #2: Once the components are determined you must determine the hierarchy (order) in which components exist as some components exist within other components.
Components that appear within another component in the mock should appear as a child in the hierarchy:
Step #3: Determining the components we want along with its hierarchy enables us to start building out our React app. For the above example React Docs does an amazing job on showing you step by step how to building out the components of this React app. I recommend using this link if you want to continue building the above example. We will continue to build a Flatiron Lab called Hogwarts using the steps we have listed above.
The Hogwarts app is similar to the above example as we need to build out a React App with different components that render a list of different pigs ( Hogwarts refers to pigs and not Harry Potter!). Let’s take a look at the deliverables for this lab. Deliverables are the key place to start when it comes to determining the following information:
- Determining the components we need to create.
- Data we want contained within the components.
- Determining the hierarchy of the components (Parent vs. Child)
- Understanding the data flow between components based on the component hierarchy.
Deliverables
We have the deliverables and we have an overview on what the Hogwarts app should look like. Let’s take a look at the file structure provided to us in the lab so that we can determine how we setup the components in an actual React App file structure. You can always create your own react app from scratch using the below commands.
React uses something called a virtual DOM (Document Object Model) that renders a virtual DOM on top of the real DOM. Index.js renders a component called App (defined already by React)on top of the index.html file we have. In order to do this it must import other files which it is dependent on (take a look at the import at the top of the file).
If we take a look at a folder called public we see an index.html file that contains the real DOM. However, React does not store anything on this file as it uses a base template to render components on this template which get rendered over and over again. Index.js will look for id called root (using document.getElementById('root')) to place the app component. A component is called in a render using upper case letter. Example: <App /> which calls the App component. <App /> looks like a HTML tag but an HTML tag would be lower case not upper case, example: <h1> <h1/>.
App Component
Components can be either class or functional components. Class components give additional functionalities while functional components speed up the functionality of the React app. In the above example we are using a class component which calls a built-in React method called render( ) which renders views for us using JSX (JavaScript Extension). This blog wont go into details on JSX but in a nutshell its a way to write JavaScript code in a declarative way instead of imperative way like vanilla JavaScript. Please use this link to React Docs to read up more on JSX.
We are also given two other component files in the component folder called HelloWorld.js and Nav.js. Both of these components are considered children of the app component as they are called within the App Component.
If we run npm start we will see both Nav and HelloWorld components rendering in the App component which itself is rendered in the index.js component which itself is rendered on the index.html file (actual DOM)! This is pretty much how majority of React app components are rendered!
Tackling the Deliverables
The deliverable wants us to list all the pigs using the data provided in porkers_data.js. This is a database we use to get a hash of data. This information is stored locally but we can also fetch from an API (Application Programming Interface).
Since App is the parent of all the components we will pull all the data into the App.js using import. Import and Export works together, if you want to import a file it must be exported from where the file exists.
We can name the import file whatever we want as long as the original file has default export listed in it.
If you notice we are defining a state in the app component. State represents the current state aka information the component it may display. In React the React app renders everything first and then mounts the component. This means that if we want the state of the App component to have a default state for the data we can initially have the state default to an empty array aka state = { hogs: [], }. This concept is very important when it comes to fetching data from external API or using local data as we can use built in lifecycle methods or lifecycle hooks to pull in data as the React app is created in an async (not in order) manner.
ComponentDidMount Method
ComponentDidMount is a special method called when the Component mounts onto the virtual DOM. We will use this special method to call the data from our porker_data.js file. In the initial state for the component the data was an empty array due to the async way in which React renders the app but once the component mounts we pull in the real data.
Inside the componentDidMount method we set the state using another method called setState. WE NEVER change the state directly using this.State as the state is immutable(can’t change) but we change it indirectly using setState. WE ALSO MUST use setState in the component where the state was initially set and not from a different component. Now that we have access to our data in App.js we can determine the hierarchy of the components and how we can pass this data to different components.
Hierarchy of Components
The hierarchy we will use places the App component as the parent to the Nav Component, PigPen Component( container for all pigs), Button Component. The PigPen Component is the parent of the Card Component which we will use to display each pig. The Card Component is the child of the PigPen Component. The relationship between components is crucial as data flow between Parent to Child or Child to Parent. Sibling Components( components on the same level) such as NAV, PigPen and Button Component CANNOT DIRECTLY COMMUNICATE (SEND DATA) TO EACH OTHER. They can only communicate through their Parent which is the App Component.
DATA FLOW BETWEEN COMPONENTS
Since we have defined the components we must identify how to communicate data between components based on their relationship. This is important as there are rules and restrictions on how data flows and how we call that data. Parent Components send down Props (Properties) to their Child Components. Props is essentially a JavaScript Object that contains information from that Parent Component. A Child component can use those properties to define its state or use the properties in functions. How we call properties in a child component is based on the type of child component we created. The child component can either be a functional component or a class component. The rules below specify how we can call props based on whether it is a functional component or a class component.
Rules for passing Props
Functional component must Return ONE JSX. You have access to props via the first argument.
Class component needs to have a render function. It must Return ONE JSX just like a functional component. You have access to props via this.props.
Based on the components we decided to created, the hierarchy of components, and the type of component(functional or class) we will defined the functions, states and props for each component below.
Components for Hogwarts App
App.js Final Component
Button Component
NAV Component
PigPen Component
Pig Card Component
Hogwarts Video Review
Understanding Components, Data Flow, State and Props are crucial for understanding the structure of a React App. React Docs are also super helpful in breaking down key ideas and concepts. Mastering these concepts will make you an amazing React Developer!
