Bricks on bricks

About three weeks ago, a coding goldmine was shown to me,the glorious React.js. React.js is a library for vanilla JavaScript. In coding, a library is something that takes a pre-existing language and adds some new tools or elements to it. Like adding a new sunroom to the back of your house, or, a brick onto another brick. Libraries are incredibly useful because they solve both common and uncommon problems developers have with vanilla languages.

Libraries and Frameworks like React commonly require you to think about a language from a different angle or they take the language to a whole new level of learning and skill required. While the syntax doesn't usually stray too far away from the vanilla language, it usually requires a slightly different approach. Let's dive into some common denominators between some common libraries/frameworks and how different their approaches are. Libraries and frameworks are very similar in the ways you use them so I will take examples from each.

Installing

Libraries and frameworks don't come built into your computer. All libraries must be installed, you will likely need a way to install a package manager. The most common and widely used package manager for JavaScript is npm(Node Package Manager). Once you have npm installed in your terminal you can install any packages for JavaScript that use the command npm which usually looks something like
npm install Your-Package-Name-Here
or, alternatively
npm i Your-Package-Name

With a package manager like npm, the possibilities are near limitless. Package managers are designed to make your life easier and you can use them for so much more than just installing things like running programs, testing programs, managing files, etc...

Imports and Exports

import Home from './src/Home'

Shown above is a common Import statement being used to import a Home function component from the file folder src. Inside of the Home file you will find an export statement that will be something similar to the following

export default Home

To import, follow the syntax above by specifying the item you would like to import and where you would like to import it from. You can import from local files and installed libraries. However, you do not need to import entire files or libraries, you can import specific files, functions, items, etc...; just so long as the item you would like is being exported in it's file.

For something to be imported, the wanted item(s) must be exported. This can be done multiple ways,

export default function Home(){
    //Code in this function will be exported
};

or,

function Home(){
  //Code in this function will be exported
}
export default Home;

or,

function Home(){
  //Code in this function will be exported
}

function SecondFunc(){
  //Code here will be exported too
}
export { Home, SecondFunc }

all of these methods will export the items specified in the way you want. From there, import away!

Knowing what you can use

Here comes the hard part. Picking the library you want to learn. You need to know what you want to build and what tools you need to use. You're gonna need to research for a library or framework that has what you'll need. You can also find multiple libraries or frameworks. Usually a framework will not be easily combined with another without some bugs. Libraries typically work a little better together but you may still encounter issues.

Using your libraries and frameworks

Once installed, learned and imported, the fun starts, Use. Using frameworks is the one of the best ways to add to your developer skill toolbelt. Frameworks and libraries add the ability to add speed, ease of use, re-use, readability, styling, the list just goes on and on. Some popular frameworks for CSS are Tailwind, Bootstrap and Foundation. Popular JavaScript frameworks are Vue.js, React.js, Angular.js and jQuery.

Why use libraries/frameworks?

The world of development requires efficiency. If you can't be efficient, you'll never finish your work on time. So how do libraries help with that? since libraries take a pre-existing language and build on top of it. They are usually easy to learn, which shouldn't take too much time if you already know the language beneath the library. Libraries are much more efficient since they solve problems that the vanilla language has. Combine those two things an you get a new skill and a more long term skill for efficiency. Practice with this skill leads to being quicker which turns into even more productivity.

Libraries/frameworks, and coding in general, build onto the fundamentals of any language. You don't always need them to get what you want accomplished but they sure do help. There is some learning so get started and most importantly, have fun!