Forem: Marco Chavez

Don't Over - React about frameworks/libraries

Marco Chavez — Thu, 07 May 2020 19:47:39 +0000

I know many of you are probably trying to determine whether or not to use Angular, Vue, or React in your current projects. Have you considered not using them?

Do not feel pressure of deciding what to use

I am almost entirely sure 80% of beginners fall into tutorial hell (I did too). Where you don't know what to get better at because you don't know what companies are looking for and you don't value what skills you have. I personally feel like a lot of this fear comes from not understanding enough of the basics.

Do not become comfortable with what you know about the basics

You will never understand everything. But what helps you become better at understanding complex concepts is to keep hitting the books, videos, or livestreams (whatever your poison is) on the basics. If you do not understand JavaScript itself don't skip it to learn a framework. Take that ES6/ES7 course because I promise you that if you understand that first, it won't be so hard figuring out how to start on your next project.

Just recently I went back through FreeCodeCamp's material and learned a bunch from revisiting the basics. For example: I always use a theming framework for my grids but stopped using them since they showed me how to use CSS's new grid system.

I also found a ton of value in taking short Udemy courses like this one.
JavaScript, ES6, ES7, ES8, and beyond
which shows you all the latest and greatest features of JavaScript.

Another great course would be JavaScript, understanding the weird parts which took my understanding to a whole other level.

There are a ton of resources out there, but please (at least once a month) go back to the beginning. You will 100% feel more confident in yourself once you explain what a call stack is, or what lexical scope is. Once you understand the basics everything else just falls into place.

You can find my social media profiles on my profile here, please feel free to reach out if you need help finding the right material to guide your learning!

So you're ready to start a project? Advice for beginners success.

Marco Chavez — Wed, 23 Oct 2019 17:51:04 +0000

You're getting ready to build your app

You woke that morning with a fresh idea in your head, and your convinced you're going to make something that is going to change your life forever. You had a big breakfast, you watched a videos of a cats playing the piano, and you finally have your computer setup. After you've setup your HTML document you question yourself about how the structure of your website should be. And after you lay some of your HTML out, you start editing your CSS.

This is where you can hurt your project

This is how a lot of my days went before I got a good grip on how to approach projects. Most of the time I would work on one part of the application and only complete part of it before moving onto the next part without any clear goals. I would write some HTML, then switch the CSS and began styling the tags I've added. What I didn't think about at the time was that every time I added a new tag I needed to re-style everything I have already stylized because things didn't always work separately as they would normally work together. This would also bum me out while I was working on projects. Since I would constantly have to go back and fix stuff I had already worked on I didn't feel confident in my code.

How did I get better?

It had a lot to do with practice. One of the first things that made me feel more confident about my code was seeing the huge changes I could make to my completed HTML after working with the CSS for fifteen minutes. I also stopped caring about how much CSS I was using. I followed along to a lot of youtube videos and people can do some really awesome things with just a couple of lines of CSS, and even though that's ideal - it all depends on how you want your project to look. I focused way too much on the semantics of my code before I just got into the functionality of it. Don't worry about optimization until after you have completed your code. You will slowly get better at on-demand optimization after you've worked on 3-4 completed projects. I also stopped trying to be as great as everyone else.

Stop trying to be just another developer

Just because certain things take you longer then other people, and it may take you more code to complete something that someone else can do with less - that doesn't mean that you aren't great. One thing I noticed while getting confident in my code was that I had to ween off of those videos where you follow along. I apologize to those who depend on those videos and make them but in my one hundred percent honest opinion you only learn 5% of what the goal of the video is. This is because you're watching someone who uses the quick and easy way to accomplish something and you start using things you can't understand entirely. Don't let yourself use black boxes because there's nothing more frustrating then not understanding what you're doing, especially when you have to go back and debug some errors later. You should only watch follow along videos if you already understand the concept, but you need a refresher on how to use it. If you need to learn something new and you do need to watch a youtube video on it, I would highly recommend you take the time to read the documentation or pay for a Udemy course on whatever it is you need to learn. Mozilla has my favorite documentation because it actually offers guides to follow along with.

Watching Youtube videos should come after attempting to understand the documentation.

I know all of this sounds difficult

But I promise you, in order to be a great developer you have to make some big sacrifices. It won't be easy, and we have all been there before. You just have to trust yourself, and always ask for help! There are plenty of people like me who would love to hear from you whether it be on this platform or another like Stack Overflow. You have the entire internet at your disposal, and an army of others who have been in your shoes. So make that cup of coffee, fill it with creamer and sugar, and type out the best program you can.

You Are One Awesome Programmer!

You Should Know 'This'

Marco Chavez — Thu, 03 Oct 2019 20:48:01 +0000

What is 'This'?

First of all, as the MDN docs will tell you

this keyword behaves a little differently in JavaScript compared to other languages

this allows you to bind a property to the the object that you are writing your code in. So if you are assigning the value of Hello World to this.helloWorld, you give yourself the ability to reference that property from the name of the object with the dot operator. If you assign a value to a property with this to the window (for web) or for the global (for node js) objects you can access them with the window.OBJECT or global.OBJECT.

In React we constantly use this to assign properties on a class to the scope so the object will be available to all functions and properties in the class.

this also allows you to use similar naming conventions when declaring variables within an object. The following is an example.

function scope(first, last) {
  this.first = first;
  this.last = last;

  console.log(this.first + " " + this.last);
}

scope("Marco", "Chavez");

result of the example

Marco Chavez

in the console.

Why do you use 'this' with React?

By default, we cannot access properties, state and methods within the components from the event handlers used in our render methods. I will use methods for example (since this is what I have to bind more often then anything else). In order to use a method within your component for an event handler in your JSX you have to bind the method in either your constructor, or the event handler itself.
It would look something like below.

<input onChange={this.METHOD.bind(this)} />

or you could bind it in the constructor (which is much easier to remember)

constructor(props) {
    super(props);

    this.METHOD = this.METHOD.bind(this);
}

render() {
    return <input onChange={this.METHOD} />
}

I typically bind it in the constructor so I don't have to remember later in the render method to bind it to this. Either way, binding allows you to use component methods in your event handlers because the event handler has its contents bound to the component's instance. I know that last sentence was sort of confusing, but what you should take out of it is that the property becomes a part of the component you are using when you bind it.

Here is some of my info

I want to thank you for taking the time to read this article. I am also very happy that you are taking the time to become a better developer yourself. I highly encourage that you join this platform and start writing yourself, since there is no better way to completely understand something until you are able to teach it. This is my first article, and I want to prepare you for a whole lot of React and Express articles, since that's what I work with the most. This was MarCode, have a great day!

The image in the header was created by Value Coders