Commit35 //JS React [Managing Data Flow]
I am studying JavaScript React with @skillcrush, in this module we will cover managing data flow
Photo of our backyard in full bloom
I am learning with Skillcrush. Please check them out and consider signing up if you're looking to break into tech! Receive $250 off your course by using the link above. Use the coupon code: TWIXMIXY
NOTE: this discount is for Break Into Tech + Get Hired package exclusively. It's the same program I am participating in!
🙏 Greetings travelers! We are continuing our JS React course with Skillcrush. I’ve really been enjoying learning coding on my phone through this app that gives daily challenges, like duolingo. It’s called Mimo. So far I’ve made it through basic HTML and CSS, which was fun to refresh, and now I’m doing JS challenges!
Join me on it so we can challenge each other and keep learning how to code together!
Yesterday’s module was a lot of fun, so I’m excited to dive in today. I am currently 77% done with my JS React course and however much I am enjoying the journey of learning, I’m definitely excited to get beyond this point of struggle as well.
Today we are listening to lofi star wars mandalorian mix on youtube.
So let’s get to it! Hit the subscribe button so you don’t miss any of my posts.
Managing Your Data Flow
DATA FLOW
How a UI handles data, including where state data is managed & how references to that data are passed as props.
Create a data flor for your UI:
Determine what will change in the UI
Choose a data model to represent dynamic content
Assign data management to components
Swap in state and props variables to replace static values
Data Flow & Components
Determine what will change in the UI
Using Flipboard as an example again. I’m not quite sure how they are finding the parts of the UI’s name. But they list off elements like pageTitle
, followCount
, articles
, etc. that will all have the potential to change.
Choose a data model to represent dynamic content
Based off the UI we have identified will change, we need to choose the proper data model to represent the dynamic content.
pageTitle
would be string. followCount
would be number. articles
would be an array of article objects. ETC.
Assign data management to components
In this example the Page component should manage all the data. It is a container component for the homepage. Container components are concerned with managing data.
Swap in state and props variables to replace static values
Previously we built a static UI, setting all the values to be static JSX. This works for building out the rough sketch of the UI, but then we will need to replace with state and props variables.
For example we will have PageHeader
props: pageTitle
and followerCount
. ArticleList
props: articles
. ETC.
Assign Data to Components
Now it’s time to implement this for our sticky note app. Once again the instructor has kindly given us a code along video to watch!
import React, { Component } from "react";
import Header from "./Header";
import NotesList from "./NotesList";
class App extends Component {
state = {
notes: [
{
id: 0,
title: "eat",
description: "reese peanut butter cups",
doesMatchSearch: true
},
{
id: 1,
title: "sleep",
description: "eight hours",
doesMatchSearch: true
},
{
id: 2,
title: "code",
description: "build an awesome ui",
doesMatchSearch: true
}
],
searchText: "search"
};
render() {
return (
<div>
<Header />
<NotesList />
</div>
);
}
}
export default App;
In this part of the challenge we updated the App component to have a state section. Then we placed a notes array and a search text string property.
Nothing truly impacting the UI at this point and the app isn’t fully interactive yet either. On to the next!
Passing Props
Passing props is really where I begin to get lost! From what I can tell we are making the data management occur in their proper components now. Then we need to use props to connect the data all together again. We passed the search in the header and the notes in the note list.
We ended up updating three different components, which you can check out on my CodeSandbox.
Render from the Props and State
Now we’re to a feedback challenge! This means that the instructor will review my work and give me feedback. Mostly I’ll probably be crying to them about props and state, so great challenge to place it on.
For this challenge we began piping in the actual data into the UI, so now our array is connected to our sticky notes.
We also laid our the beginning of the search filter, but we will still need to write up some logic that will toggle the data to be true/false depending on what is being searched.
Quiz: Managing Data Flow
100% on the quiz! I may have still needed the code along videos, but I did feel confident about the material covered in this module.
Definitely beginning to think of what projects I may build as I learn more.
Props and State! PLEASE tell me how you learned this. I could use ALL the help.
Leave me a comment with your insight! 🙏