Halfway of My Web Developer Journey

JOHNNY FERNANDEZ
5 min readJun 27, 2021

React, JSX, props, states, bootstrap

In the next blog I’m going to explain what I’ve learned in a general aspect of a web developer, also I’m going to explain a little bit about react, how react makes a life easier for a programmer or web developer and finally I’m going to tell you my journey writing react code.

By Christopher Gower on Unplash

General aspects of web developer

Everyone believes that a web developer is someone who makes a lot of code and only this, but now that I’m halfway of my goal of learn how to become a web developer, I believe in the fact where a developer requires more than just an skill of coding, but also they require to have many others different skills. The first skill or ability, I believe a web developer should have is “organization” because with this ability as a web developer I can save a lot of time when I’m debugging (trying to find errors) and also I can have a readable code that other programmers can understand easily. The next skill, I believe a programmer or developer should have is “research” because with this skill as a web developer I can find new ways to do certain codes or I can also find new techniques for a specific purpose in my code. The last other skill a web developer should have is “reasonable thinking” because I can have good ways to do my research but if you don’t understand the data, I never going to be able to write my code properly.

What is react and How it works?

Props using React in JavaScript

React is JavaScript library that allows the user to render the code by components instead of having all the code in a single JavaScript file. This means that if I want to design an specific component and then render this component in my App, I can just basically design my component in a JavaScript file and then attach it to original or App JavaScript file. I can do this because React use JSX to convert the react language to the language that JavaScript understands. In other words, JSX is a translator of React for JavaScript.

React is really powerful because allows me to use HTML in JavaScript and also to pass or attach different components to the main JS file. React also allows the programmer to hold states where you basically hold data, like a Array, String, Object, ect. This states are really helpful because they can be updated or change depending of the use of it. React also is really useful because it can allows the developer to pass data from one component to another or pass functions to other object which can be really nice because for example, I can use the same function in different component or use the same data for another component.

React by reactjs.org

React pass data or function using something called props. Props are basically links from one component to another, referring to an specific function of data. In React, props are the best way to transfer data from one component to another because it allows you to change the data in all the components that contains the same props if you do the change in the main file where you first have stored this data or function. Props have a restriction, which basically says that props can only be pass down or up but they never can pass data from right to left or left to right. This means that for example if you have two different components attach to the main file and both of them hold an specific data that you want to pass to each other, this data can be pass to the main file but not to the other component that is also attach it to the main file. For this reason, a developer should know that the main file or JS file where all the components are render, should hold the data that multiple components are going to use.

Bootstrap is a library that allows you to style in a responsive way. This means that bootstrap allows to design a app in a way everybody can see it properly. In other words, bootstrap is a tool that allows to design an App for many devices views such as tablets, mobiles, computers, etc . Bootstrap uses class names to categorize an specific action in your CSS. For example, let imagine, I have a App that have a white background but I want this background to black. If I want I can do it in CSS, I can do it by referring to the specific component and adding the property in my CSS, but with bootstrap I don’t even need to use CSS because bootstrap have many different templates depending on the class name that you want to use. So basically, I can just use bootstrap and not CSS at all because bootstrap have many different CSS templates depending of my necessity.

Components Layout using BootStrap

React and Bootstrap nowadays are require for most of employer because they are organize but also really time effective which makes them a perfect choice for company with a fast paced environment.

My Journey with React Code

I remember the day when I was talking to my tutor about how React it was going to make feel as a real programmer but I didn’t know why he was telling this because I felt even though JavaScript was hard it was also a very complete program. Afterward, I started to realize the reason why my professor says “React will make you feel as a real programmer” and the reason behind this fact is because I noticed React is not only very organized but it also more compact. For this reason, I felt I could do so much in a short period of time without getting crazy like I used to do in the pass just using pure Vanilla JavaScript. After I finish the phase of React, I not only understood the word my tutor says to me but I also learn that React is a great tool for work production in a company which definitely will make a difference in any company, therefore I believe many companies nowadays not only need web developer with experience with React but they also believe React control is a great skill for a web developer.

--

--