DEV Community: adarvin14

How to Integrate a Rails Backend into a JavaScript Web Application

adarvin14 — Sun, 11 Jul 2021 02:24:06 +0000

When it came to learning web development, JavaScript gave me the hardest time, despite being less complicated compared to other web frameworks like React. Learning how to incorporate database information is incredibly important for making a website flow properly, especially if the website requires user data and any other information that is saved to a user or the web application overall.

In contrast to React where the information pulled from an API is manipulated based on the code written directly in React, with a JS application, manipulating database information is determined by the Ruby code written within your controller files. In React, the controller files in your Ruby-based backend are used for CRUD -that is Create Read Update and Delete - the essential actions for a web application.

How State Works in React

adarvin14 — Sun, 04 Jul 2021 02:43:01 +0000

React has become one of the most commonly used languages to code with in web development. One unique aspect of it is the ability to have a state: a Javascript object that updates a component's dynamic data. However, state can only work within a class component, which is why when functional components are used, they are usually designed for rendering static data like footers or a navigation bar. In other words, data that is written into components that do not use state are not subject to change. Since the data is not being manipulated in any way, state is not required for that component.

The Difference Between Class Components and Functional Components

adarvin14 — Sun, 27 Jun 2021 01:17:45 +0000

During my last 2 months at Flatiron, I was learning about React and its ability to easily create a template for creating a webpage. When it came time to create my final project, I had chosen to design my components with class components as opposed to functional components. While I was creating my project, I really did not know the difference between class and functional components.

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py2q0594o6qf463l0rfr.png)
This is my project from Flatiron: as you can see the css is the default code written up when running react-create-app. I'll be looking into making this application cleaner and more personalized.

When I was making the project, I used a template that one of my instructors had posted that made use of class components. I followed this template, but now that I am looking to polish and add to my projects I find it rather difficult to format and stylize my web application using CSS. Class components are easy to use, but as I have been doing research on fleshing out web page applications, I realized that using a class component is good for functionality, but ends up having a very barebones design. Every tutorial and blog post that I have looked at have functional components as their component template.

In addition, since my React project was based in Redux, I never had a real chance to create a pure React app that incorporates a backend. As a result, making changes to my project to add a navigation bar or sidebar has been difficult. It may just be my lack of experience that has made me unable to see the solution to my problem, but I found that it would be better to begin a new project, and while I don't have a clear idea of what I want to do with it, I figured I'd use it to learn how to code strictly in React, especially since functional components are standard with regards to web development.

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl2ygyrxofe49pkntej4.png)
This is my new project that will strictly React and will not use Redux. It's much more visually appealing compared to the default css given by React.

(https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plfqjx6ndfxz9f608aui.png)
I managed to build in a navigation bar using react-icons which can be found here: https://react-icons.github.io/react-icons/icons?name=io5.

My idea for this project will either be a replication of my Flatiron project without the use of Redux, or (if I can change the format and styling of my original project) try to create one of my older Rails-based project using React.

My Time with the Flatiron School Program

adarvin14 — Wed, 28 Apr 2021 00:05:36 +0000

Full Stack Web Development. At the beginning of my program in September, I had no idea what that term meant when I was first learning how to code. It wasn't even until I had started learning Rails that I understood the code we were learning was for the backend of web development. These last 8 months have been a crazy journey for me. It started with the idea for a career change. I was furloughed in April last year as a result of the pandemic in what I believe to be a stroke of good fortune. I really wasn't happy with my job; it wasn't very fulfilling and if it was any indicator of what it would be like working in the environmental sector of the working world, then I didn't really have any interest in staying. Because of this, I saw it as an opportunity to learn something new and give myself more skillsets to become more versatile so that I have more opportunities.

Coding had always interested me, but I didn't know where to start or what code I wanted to learn. The Flatiron School gave me the opportunity to not only learn how to code, but also to show me what it can do and how it affects the way we use technology every day. Originally, the program I enrolled in was intended to be a 6 month program. Unfortunately, I hit some hurdles on my journey towards becoming a web developer and it set me back a bit. But I had come so far, I was so close to finishing the program that I could not give up on myself, especially after learning so much. I couldn't let myself give up knowing that I had another chance and my teacher had more faith in me than I had in myself. So I didn't give in; I managed to pull through, finishing my JavaScript lessons and moving on to complete my lessons in React/Redux, easily the 2 most difficult units in the program (for me at least).

I managed to complete my learning of coding that many people spend 4 or more years learning in a very short amount of time. For me, it didn't feel that short (the pandemic didn't help with my sense of time). I spent many days and nights learning and coding. Some weeks passed like it was nothing while some felt like they took forever to pass. In the end, it was some of the most difficult work I've had to do. Having all this information thrown at you so quickly, especially when learning what is essentially a new language, is very difficult to absorb. Sometimes it didn't quite sink in and other times I felt like I understood it right away. The curriculum was structured so that concepts from later units built off of previous concepts. While understanding the connections of these concepts sometimes made sense, the incorporation of entirely new concepts (like props and state in React) threw me off and slowed me down in the learning process. But the struggle, and overcoming that struggle to reach a new understanding is part of that learning process.

Not only am I incredibly proud of the amount of coding I have learned and what I have created within the last 8 months, I am also looking forward to continuing my work in a professional work environment where the work I do has a real impact on how people interact with technology.

React/Redux Project

adarvin14 — Mon, 12 Apr 2021 13:41:15 +0000

The final project for the Flatiron School Full Stack Web Development program. As the culmination of all of the work that I have done so far, not only requires the most work, but also the most knowledge to complete. Like the JS project, I encountered many bumps in the road. Thanks to my work for my JavaScript project, I have a much better understanding of how frontend applications work and how the backend via Rails API connects to the frontend.

When I was working on my JavaScript project, it was incredibly annoying having to reload the application page every time I made a change in my code. React has made this easier by automatically updating the web application. It makes it so much easier to see any bugs that occur in my code as well as allowing me to see if the changes I make to debug the code actually work. This was particularly helpful with my code for the forms for both the albums and reviews. The reviews form initially had trouble submitting the information from the form. Until I solved the issue this bug typically arose from either incorrect code from my actions component, or simply misnaming components/variables when trying to import the components needed.

The most difficult part of this project was definitely working with Redux. Coding the frontend in React was not too complicated; at least, not until I had to start incorporating Redux into my code so that I could begin pulling data from the backend's API to display on the frontend. Part of this struggle came from understanding state and props, differentiating between the 2, and how I can manipulate states in order to display the data in the way I want.

While my project is complete in terms of its functionality, in terms of its presentation it is completely barebones and I am planning on working on it to make it much neater and appealing to look at for the user. Other functions that I plan on implementing are One of my next steps as well is the implementation of a user using JavaScript Web Tokens in order to make it a bit closer to a realistic web application that someone would want to use.

This screenshot is before I added Albums as its own object that has a has_many - belongs_to relationship with Reviews.

This screenshot is after adding all of the relevant files and code that incorporate Albums as its own class and has its own routing separate from Reviews.

If you would like to view my repositories for this project:
https://github.com/adarvin14/music-reviewer-client
https://github.com/adarvin14/music-reviewer-api

Javascript Project

adarvin14 — Mon, 22 Mar 2021 18:22:18 +0000

So this is my second time trying to complete my Javascript project for the Flatiron School online curriculum. Second time around, things have been a little easier in terms of completing the coursework. The project has been the biggest concern for me, but with a better understanding of Javascript I am hopeful that this will be a successful project. I still find that Javascript is the most difficult coding language that I have learned throughout my entire time learning at Flatiron. While I understand the concepts and lines of code that go into creating a working front end web application, I still find difficulty in writing code to execute the proper functions that I intended to create. It's very tricky, especially when you add in an API that you create yourself using a Rails backend. Incorporating the database from the backend and translating that information into a format that is easily processable and compatible with the front end is rather difficult. Creating functions that manipulate this information in complex ways is really difficult, but it's incredibly fascinating what these lines of code are capable of and how these complex lines of code show up on the page as easily digestible information. I'm hoping that my experience going through this project will help me become a proficient web developer and I'm excited to see what more I can do with Javascript even after I finish this program.