Originally just learning Javascript was really cool, being able to see the HTML you coded, and being able to interact with it with event listeners was novel! It felt like it took a lot of work to write an app, because you had to write out div by div basically the HTML you wanted, you also needed to write out the Javascript you wanted. But, while working on the Phase 2 React Project for FlatIron school I really was able to experience the joy of having code write code for you! Using new tools like Components and state and props made it so easy to create many different elements on the page and to share information across so many different files in the app without me actually having to write one piece of HTML or Javascript, and thats allowed with the JSX syntax. Here is an example of JSX, where HTML and javascript can be used in the same function or logic to create the dynamic element that you want to use:
if (flipped === true ) {
return (
<div className="card">
<h1> { kick.name } </h1>
<img src={ kick.image }/>
<h2>Purchase Price: ${ kick.price }</h2>
<h2>Resell Price: ${ price } </h2>
<button className="btn btn-primary"> You {
profit > 0 ? `made $${ profit }`:
`lost $${profit }` }! </button>
</div>
)
}
Really useful from using React, different languages can get written at the same time. All of this working together and sharing of information that is allowed through these tools really creates a seamless way of rendering many pages, allowing for manipulation of the DOM so that the page can look like a completely different page with css styling and the HTML that your JSX renders, but with only one HTML file which is the cool part!
The props allow a sharing of information between different components passed down in kind of variable through the parent-child relationship. Where without React you would have to write the information and update it manually every time in each file the parent and the child, maybe even sometimes div by div. But with the props it allows an easy way to code the information or functionality you need once and then be able to pass it to the rest of the app, which other wise these would be separate files that couldn't dynamically update the information we need. This increase the functionality because props can be more than just variables, it can be objects, or functions, and this passed down allows the component to inherit functionality and then be able to reference it in the rest of the file while only having declared it once in the parent component. Also any child of the parent can reference the same prop really increasing the functionality with only declaring the original function or variable once!
With the components being able to relate to each other in this way really reduces the amount of code we have to write. For example if you create one component, you can implement it in your functions by using JSX, and it will manipulate the DOM and generate some HTML for you, but at the same time it will also have all the Javascript and functionality that was written in the components file. This component can then also be reference or imported everywhere else in the code without having to rewrite anything, just by calling the Components name. Here is an example of a several component with props and the props being able to be passed down to different components :
<Route path="/flipped" >
<Flipped wallet={wallet} setTotalProfit=.
{setTotalProfit}/>
</Route>
<Route path="/closet">
<Closet wallet={wallet} setWallet={setWallet}
totalProfit={totalProfit}/>
</Route>
<Route path="/">
<Store kicks={kicks} onBuy={handleBuy} wallet=
{wallet} totalProfit={totalProfit} />
</Route>
Using state also really useful in the sort of streamlining the writing of the logic behind the functionality of the app. It really showed me how functions, or in this case, React Hooks, can be used to create some information until it's needed to be accessed. It kind of sits there until your code then references it, and then it can be referenced many times anywhere in your code while only having to be literally coded only once in the states variable. How it can be referenced is through the parent-child relationships you can establish through using props and states together.
This was really exciting because it made it looks so easy. It really opened my eyes to how some code can help you write code that at times might not be there because you cant see it because you didn't write it, but it then can be used elsewhere in you app, and then can manipulate the HTML and DOM in such a way that a single page application can look like multiple pages seamlessly working with each other.
Top comments (0)