A quick update…
Week four of my Flatiron school journey started just this past Monday—it’s crazy to think that I have been coding for over a month now in this program. And even crazier to think of how much progress has been made over the past few months since this pivotal decision. Over the last week, I’ve honestly felt a little more motivated in every aspect of life, from working out and eating healthy, to coding my life away at night. And it’s all moved by so quickly it’s crazy to notice that a week even went by! Feeling drained at the end of the week has made me realize though, that taking breaks and keeping my chin up will lead me to a more positive and efficient weekend of studying.
What is React.js?
This past week, we began our primordial learning of ReactJS. React is a javascript library for helping build user interfaces, so it pretty much makes things much easier when we want to see them on the DOM. Wait, much easier…? ….Well….eventually much easier. As of right now, there is a very thick line between what I can understand and what I can’t. Luckily I feel as if I had a sudden boost in learning React as compared to when I originally learned Javascript (JS) on its own. I genuinely believe that this is due to the head start I have by being in a fully immersive program. It gives me the focus to try and capitalize on the great minds that are around me.
But what is React solving? What problems does the library fix and why is it important to me. If you’ve ever used vanilla JS you can understand how time-consuming and energy-taxing writing all of the code can be. Especially when you are trying to bring information to the DOM. This is because JS is imperative, meaning that you have to write every single line of code to get from point A to point B. Let me explain this a bit more. If you have an imperative language such as JS then this means to do something such as bringing an item to the DOM, step-by-step.
const header = document.createElement("h1");
//create the header elementheader.textContent = "Hi!";
//add the text inside the elementheader.className = "main";
// give the element a unique classNameconst container = document.querySelector("#container");
//get the container elementcontainer.append(header);
//FINALLY, add the header
This is how my program describes imperative programming:
Imperative Programming:
- Explicitly describes the actions a program should take, each step of the way
- Describes how a program should go about doing those actions
As you can see, this is not the most efficient way to write code, it can be a hassle when you have many objectives to do, in little time. So, some brilliant human being had the idea to create a better way to go about doing it! And that brings us to declarative programming. This type of programming is when you describe what a program should accomplish (or what the result should be). This way, the program is left to fill in the blanks on getting from step A to step B. But the most important thing to realize is that Step B is still the result!
// JSX syntaxconst header = <h1 className="main">Hello from React!</h1>;
ReactDOM.render(header, document.querySelector("#container"));
As you can see in the code above, there remains a much easier way to go about doing this. The syntax is hard at first, but it is a must when looking at the to-do list of things that will make me a better developer!
