Going Through React
Tags: reactnewbie, javascript, schoolproject, womenintech
Published: 2021-06-28 02:15:25

<h2>Lets start</h2>
<p>So this time we are going to go over my experience with React in school so far. While react seems a whole lots easier to navigate and write out than vanilla Javascript( I say this only because vanilla Javascript was the bane of my existence), It was still difficult to get certain aspects of the app to become functional. </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amuea9uaposl7z4stkol.jpg)
<h5>Photo by <a href="https://unsplash.com/@ugmonk?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jeff Sheldon</a> on <a href="https://unsplash.com/s/photos/recipe?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </h5>
<h2>Into The Nitty Gritty</h2>
<p>So getting into the code in the beginning, I was so confused as to what or rather where to even start. Do i start by making my components folders? Do i just go through and create each JS file and then figure out exactly what I need to do? Eh, I'll figure something out. Heading farther into the process, I ended up redoing this thing 3 time and to say This project was easy would be a lie. I drew out a game-plan of what exactly I wanted my app to do. This was going to be a recipe app that would allow you to add, edit, delete, and search recipes.I wanted to include the instructions for each recipe without it having to redirect to a separate page as well as the ingredients and a picture of the end result. This however did not end up being the case and I was only able to get the ingredients , title, and picture of the dish to populate due to having to switch between pages to actually get all the information down. Writing out the back-end server ended up not being too difficult to write out once I knew what I was trying to attain through it. </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghvbjlsz532jseu1nxpf.jpg)
<p>Photo by <a href="https://unsplash.com/@dav420?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">David Pupaza</a> on <a href="https://unsplash.com/s/photos/error?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </p>
<h2>Errors</h2>
<p>One of the main errors I came across was trying to get my JSON server to connect to the actual app I was trying to create. When it came to trying to get it to host to Heroku it was a constant fight it seemed . First it wouldn't deploy, next it wasn't populating or updating any information and eventually it just was like nope. I had to reach out to some classmates to figure out what I was doing incorrectly. Come to find out that I didn't have the repo formatted corrected and and so the deploy I was trying for of course wouldn't work. The next issue I had was while I had all the coding done and could run the site on my local server with what seemed to be no issues or problems, It started to register just general warnings as full blown errors. I went back through my code and realized that I had entered an import that was not in use and so while it wasn't actually doing anything because it wasn't in use, it was trying to import a function into my app file that didn,t exist.   </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fciqfju3o2fu5112p9a.jpg)
<p>Photo by <a href="https://unsplash.com/@oskaryil?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Oskar Yildiz</a> on <a href="https://unsplash.com/s/photos/react-js?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </p>
<h2>The Final Deploy</h2>
<p> When the time came around to finally get the deploy to Netlify, the sigh of relief that came from me, even though the app did not include everything that I had initially expected it to, was amazing. Granted the styling I had planned to use during the project ended up  slightly rushed due to a time restraint that was out of my control, the coding and functionality is what mattered. </p>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulk2wgh7ydz0pw0n1ans.jpg)
<p>Photo by <a href="https://unsplash.com/@anniespratt?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Annie Spratt</a> on <a href="https://unsplash.com/s/photos/learning?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </p>
<h2>What could have gone better </h2>
<p> This phase a lot was learned when it came to functionality and how react was set to work. Some things I definitely need to continue working on is useEffect and useState. While using it  in code seems to be simple enough, being able to actually describe what they do in plain words was difficult and my brain went completely blank. I learned so much just by going through and being able to troubleshoot my own code without the use of tests It started making \me much more confident as a developer. </p>