DEV Community: nightcoder

How React saved my life.

nightcoder — Wed, 09 Sep 2020 07:07:42 +0000

If you are :

having doubts about your coding "level" to start learning React,
at a decent "level" of knowledge of JavaScript but don't feel ready to start learning a front-end framework yet,
learning JS and got tired/discouraged/bored or burnt out,
working on a beautiful front-end project that makes you feel like 1000+ lines of codes are a bit much all in ONE JS file,
in need of some novelty/excitement/challenge/motivation in your coding journey,
thinking React is NOT for you cause it's too difficult,

this post might be for you!!!

By the quite dramatic title of this post,

what i really mean is:
as a JS learner, React reactivated💡 my drive/focus to keep learning and make progress with JavaScript + boosted🚀 my overall coding confidence.
I was feeling lost in a Javascript sea, somehow "tired" of vanilla JS...Hard to admit, because i love JS and i love writing code. That's why i do feel like React pretty much saved my life. Or at least my learning journey!

The plan of this article:

Why/How did i finally jump into React?
How much JavaScript did i know when i started with React recently?
React "philosophy": how steep is the learning curve exactly?
The HUGE Benefits of starting learning React
Are you ready to start? / You think you're not ready

So here's how it all started.

The trigger

I was roaming the youtube streets in search of advice/inspiration when i saw this comment:

This is a short snippet of what this viewer wrote, but it's the part that struck me the most: he had put words onto this thing i had been feeling for a few weeks at this point. "nearly HATE JavaScript" may sound intense, but i could totally relate!
For me personally, just before meeting React, JavaScript had become quite difficult, somehow dry. Or maybe it was the learning journey itself (that was becoming difficult and dry)...
Anyways, this very comment sparked something in me: "oh cool i'm not alone to feel that way!" and quickly: "i'm starting React tomorrow!"

The extra push

Shortly after that, I received a DM on twitter from my 100DaysOfCode friend Danny (who has experience as a developer) encouraging me to try implementing with a framework the vanilla JS todo app i was working on!
I could have chosen Vue.js as many people say Vue is the easiest front-end framework to learn, ideal for beginners! Which sounds great, but i thought "React!!!" because that's what i chose for the Roadmap of my coding journey and knowing i'll spend time learning a framework anyway (i follow the "learning by doing" method so it takes me some time to finish one project!) it'll be more time efficient for me to just jump into React.

It took me some more time (3 weeks?) to feel "ready" to follow Danny's advice and i finally started to implement my todo app with React!🚀
I actually had to rebuild it from the ground up!
But here i am today, 100% learning React, todo app almost ready, having a real blast at it, more excited than ever to swim in JavaScript!

How much JS did i know when i started with React:

general JS syntax (but still learning new things and tricks almost everyday lol)
DOM manipulations and template literals, like:

const todayDiv = document.querySelector("#today");
const week = [tuesday, wednesday, friday, saturday, sunday];
const day = `<div class="tuesday"> Hello! Today is ${week[0]}. Have a nice day!</div>`;
todayDiv.insertAdjacentHTML('afterbegin', day);

fetch data from an API + HTTP requests
sense of what a promise is (#3LW for the connoisseurs😋) but without being able to explain it like a pro (unlike fetch()😎) but i knew fetch() is a promise (or rather, fetch() returns a promise, giving us access to methods like .then() or .catch()) but i'll write/explain about fetch in another article soon!
array methods/higher order functions like forEach() and map(), filter() and the other array methods like sort(), push() to add at the end of an array and unshift() to push at the beginning! (sidenote: when displaying a dynamic list for example, the unshift() method is very useful to make the dynamically added items appear at the TOP of the list and not at the bottom... 😉 )
callbacks (in array methods/higher order functions for example)
basic knowledge of CLI (Command-Line Interface aka terminal)
OOP basics (Object Oriented Programming) : it means i was able to create classes and use/understand the "this" keyword, without being utterly confused lol
basic knowledge of how JS works under the hood, which is very exciting to learn! (the callstack, lexical environment, execution context etc...) - but you absolutely don't need to know that to start React. We have to know and understand how JS works under the hood in order to become better JS developers in general, not to learn React.

What was i scared of or impressed by:

the spread operator ...: i had NEVER used it and had no idea what it was for! I used to find it very intimidating
destructuring: scary because too abstract/complicated for me (that's what i thought)
writing promises other then fetch() in my code
writing async functions + use await keyword, i have to be honest here 😅
using libraries (except for moment.js ❤️ ): i had never used bootstrap or any other library
React. plain and simple.

React "philosophy" : steep learning curve?

React isn't that difficult for a JS beginner with some "basic" but steady knowledge.
React offers a different approach for seeing and coding our websites. It's not as hard as you think. Trust me.
In fact, it's quite clever, powerful and fun!

This different approach is based on 2 main things:

1- Think Component!

No-brainer alert: a website or app is a construction built of different elements (navbar/menu, sections/pages, footer etc...). We agree on that.
So we can see these elements as the components of the website.
Well, that's React rule#1 in a nutshell!

In the code, you write the components as a class (class component) or a function (functional component). 1 (one) JS file per component. No variable naming conflicts anymore and cherry on top: components are reusable! of course! reusable in other projects (a contact form for example!), or in the same project several times (a button!)

So any component will be created like this:

class component:

class MyComponent extends Component = {
  //some code
}

by the way: the Component class that we extend to create our components comes from React!😉
We import it at the very top of the file.

you can write the same as a function (functional component):

function MyComponent(){
   //some code
}

arrow function? yes:

const MyComponent = () => {
 // some code
}

OK. Look at the snippet below. This is the full code for an actual real component.
Let's say the title component of a website.

class component:

class Title extends Component = {
 render(){
  return <h1> I am the motherf*****g Title component of the website!!! Sway!!! </h1>
 }
}

same component, functional:

function Title(){
 return <h1> I am the motherf*****g Title component of the website!!! Sway!!! </h1>
}

arrow function, yes please:

const Title = () => {
 return <h1> I am the motherf***ing Title component of the website!!! Sway!!! </h1>
}

I know. Your brain is shouting: "HEY WAIT! isn't that HTML that i see in the return statement?"
Well, no. It's... JSX!
And have you noticed the render()method in the class component? It belongs to the Component class of React and is responsible for displaying, rendering the JSX! As you can see, functional components have no render(), which makes sense: they're not classes! They just use the return statement.

JSX, or: Forget about your index.html file!

To create the components we want, forget about the traditional index.html file. React uses JSX.
You could see JSX as "JS disguised as html-on-steroids".
So JSX is actual JavaScript that looks 100% like html!
That's why i would say that there's almost no learning curve there.
You can write things like <div> </div> (many classic html tags are possible!!) but also <MyComponent> </MyComponent> or self-closing <MyComponent />.

So in other words: React "generates" the html of our project. I know. "WAIT! WHAT? REACT GENERATES THE HTML???" yes! you got it! Sorry if i spoiled the big reveal but that's an essential and exciting part of React.
For the styling? classic CSS file. Or, to reduce the number of files and because it's super handy, it's also possible to write CSS in JS! There are many options to do that, but you'll discover them very soon!

2- The "state". What👏🏾 does👏🏾 it👏🏾 mean👏🏾 ?

The other thing that's different is the way React handles our variables/data and the behaviour of our components!
Let me put it this way: in React, our components will behave on screen the way we want them to, based on their change of state.
In other words, our components on screen are "reacting" to updates (or changes) of the variables/data they are responsible for, their state.

In our code, the state is simply an object!

state = {
 key:value,
 key:value
// etc...
}

The state is defined by YOU when creating your class component. It will store the data or starting point value used by the component that needs it.
(sidenote: the state is "initialised" in class components only! It can also be handled by functional components, with the React HOOKS! I used to be so impressed by this word when in fact that's all it is: built-in React methods to manage state within functional components! But that's another story you'll be reading soon 😉 ).

So for example, to create a classic Counter component, you would write:

 class Counter extends Component = {
  state = { count : 0 }

  render(){
   return <div> {this.state.count} </div>
  }
 }

This means that the starting point of our Counter is zero.
Now: everytime the state of the Counter (count : 0) will be incremented or decremented, React will render or re-render (again and again) the Counter with its updated count on the screen.
How does it work under the hood? Well, it's too complicated to explain right now and i actually couldn't😋 but just to give you the main thing: React uses a virtual DOM and there's React.createElement()...

Forget about DOM manipulations😈 !

In React, you do NOT get to manipulate the DOM😈 !!! It's over.😭 But wait! React is awesome, trust me on this one.
React "creates" the html we need and handles the DOM manipulations we want to achieve.
Under the hood: React.createElement(), remember?
As we said earlier, React renders (or re-renders) the components according to their state (update of a timer or dark-mode toggle for example).
This whole rendering thing corresponds to what's called the component's lifecycle. In React, we say that we "mount"/"unmount" components, or components are "mounted"/"unmounted", various libraries use terms like "enter", "active", "exit" referring to the component! You see what i mean?

So how can we increment or decrement a counter if we can't manipulate the DOM ourselves?
Well, it gets done with built-in React methods!!😉 Let's not forget it's all JavaScript, so of course it comes with very cool and easy to use built-in methods!
The main one is: setState(). You will be using it all the time! this.setState()

in our Counter component, it would look like:

 class Counter extends Component = {
  state = { count : 0 }

  incrementCounter = () => {
   this.setState({ count : this.state.count + 1 }) 
  }

  render(){
   return( 
    <div>
     <button onClick = {this.incrementCounter}> Click me to increment the counter below! </button>
     <div>{this.state.count}</div>
    </div>
   )
  }
 }

Not that crazy complicated, you see?
And this counter works perfectly! You press the button and the number in the div just below increases! (you need to add some css of course😋 but you know how to do that!)
I know you still might have some reservations but i'm sure you understand this simple counter by just reading the code. Self-explanatory enough, right?
Everytime we press the button, it changes the state of our Counter component (in this example we increment it) , so React re-renders our updated Counter each time we click the button!🤩

So now when you'll hear about state management, you'll know it's about handling the changes of state of a component. Or, the sharing of the state between several components! You'll be facing this situation very often and early on!
And you will get it, i guarantee it.

These 2 things, Components and State are at the core of what you probably have heard people refer to as the "React philosophy".
Indeed, things are handled quite differently, but it's absolutely possible to start learning it now, even if like me, you're not a JS Jedi yet!😅

The HUGE Benefits of starting to learn React now.

Jump / Progress in JS knowledge

Because of React's class components, you will improve your OOP practice : you'll be writing a certain amount of this.state.myStuff, this.setState({ key : value }), this.state.otherStuff, this.myMethod, this.otherMethodOfMine...
Faster than you know, you'll spend your time destructuring the state (it sounds so complicated now but trust me it is so simple once you are within React). Also, you will have to use the spread operator ...😬 all the time! Check this out: [...array] is the same as array.slice(). And .slice() is the array method to make a copy of an array. You'll need it a lot in React, to change/update the state! Indeed, you'll learn that the state is immutable and it has consequences. But don't panic, React has several major built-in methods to deal with that.
You can be 100% confident that your JS knowledge will seriously rocket or at least strengthen, by learning React!

Today i'm so unimpressed by the spread operator and i'm destructuring the shht out of everything!😂
And it's only been 2 full weeks of learning sofar! You can do it too, for real. Just take your time, to each his/her own pace.

Get quicker to the goal of finding a junior dev job!

Let's be honest: React is very popular on the job market.
I think the sooner you jump into it, the better. You HAVE TO learn JavaScript anyway! So why not do it with React? 1 stone 2 birds. But poor birds😢 so 1 stone 2 skips!! (much more than 2..😉 )

Discovery of many great libraries, dependencies

React comes in with a plethora of available tools, libraries, dependencies, which are also very good for you to try. It will make you feel more at ease with web development in general.

From webpack to bundle the project to react-bootstrap or material-UI for layout, react-spring for animations, styled.components or emotion to write CSS- in-JS (very cool!) and the list goes on!
This is how i quickly came to a real understanding - almost awakening - of what it really means to BUILD projects. This is all architecture! How great!!!
Of course that's not all there is behind the concept of "building" a project but we're getting there!

You ARE ready to start! 👊🏾

Yeah, now is the moment when you drop everything you were doing and start learning React!

1- create a folder for your very first React project! yes let's do it!
2- open the terminal (make sure to locate yourself within this new folder you just created) and type: npx create-react-app my-app
3- once the installation is complete in the terminal, you can read:

 cd my-app
 npm start

Happy hacking!

3- so, type as they say: cd my app and hit enter😉
4- now type: npm start, hit enter, wait a moment, wait...
AND BOOM!🚀 the magic is starting!
Welcome to React my fellow learner!

Good luck on your journey!!! i'm still at it and having a lot of fun! Let's keep learning!✊🏾
All the best, and thank you for reading!

See you in the next article (shorter i promise😋).

WHAT IS THE LOCAL STORAGE? HOW TO USE IT?

nightcoder — Mon, 10 Aug 2020 08:28:00 +0000

If you need to:

save the value of some sort of counter and not have it reset to 0 each time you refresh the page
save the user's input.value somewhere (because you need to)
keep dynamically created data on the screen AFTER a browser refresh
or anything like that

Well, good news: that's what localStorage is here for!!!🤩

Let's dive into it

The project i'll be using as an example here is my TO-DO list, as it is exactly the kind of situation where we would really need to use localStorage.
In a TO-DO app, the user types something he wants to add to the list (in the input field) and when he presses the "add" or "submit" button, it gets added to the screen.

To achieve that, we "manipulate" the DOM 😈, using one of the following methods:

createElement() + appendChild()
or the one dear to my heart: insertAdjacentHTML().

You can click on each of them to see more information, in case you are not yet familiar with DOM manipulation.

Cool!

But there's a problem: everytime we refresh the page, it all goes away... There's no onscreen persistence of the items we add.
Once we hit the refresh button of our browser, our list goes empty.🔄 😭 We need to fix this!

That's precisely when localStorage comes into play!
The Local Storage is a sort of browser database, that can save our data as strings (key/value pair objects).
You can see the Local Storage in the devtools: instead of "console"😉, go to "application" (you might need to click on the little double-arrow on the right to have access to it).
Here it is:

This is where we can store our data!!

Here's how.

To create a storage:
localStorage.setItem("mySuperStorage","yay!")
If you open a new tab in your browser, type that code in your console (+ press enter), you'll see the following🤩:

As simple as that.

To retrieve the data we stored:
localStorage.getItem("mySuperStorage")

Okay, and how does this work really?

Under the hood:

localStorage is a property of the Window object
it stores data permanently (unless you erase it, we'll see how below)
there is one localStorage per website/domain
which means that it doesn't matter if you have multiple tabs of the same website opened, it's the same localStorage as long as you are on this website (which is great!)
maximum size is about 5mb (which is plenty for storing key/value pairs. They are just strings, very light!)

In our code, localStorage comes in with 5 built-in methods.
The ones we'll use all the time are:

localStorage.setItem(name, content): setItem() lets you create your storage(s). The 1st parameter is the name you want to give to your storage, the 2nd parameter is what you want to put in this storage. You can create as many storages as you want!
localStorage.getItem(name): getItem() lets you retrieve the data you stored in the storage. You have to specify the name of the data you want (= the name that you gave to your storage).
localStorage.clear(): the clear() method erases everything from the storage. No parameter needed, quick and easy!

Now let's implement it in our TODO app example!

We're going to:

create a storage with localStorage.setItem()
store each new task added by the user, in that storage!
display all the todos stored in the storage after the user refreshes the browser or closes the window and comes back!

For now, our localStorage is empty. It hasn't been initialized yet.

1- Let's create a storage with localStorage.setItem()

const todoStorage = [];  
localStorage.setItem("TODO-app storage", JSON.stringify(todoStorage));

1st line of code: const todoStorage = []: this creates an empty array (which will store all the todos entered by the user)
now let's break the 2nd line of code in 2 parts:
- localStorage.setItem("TODO-app storage",: this piece of code creates a storage named "TODO-app storage" in our localStorage.
- JSON.stringify(todoStorage): this part will turn the data we put in the storage into strings. Let's not forget that everything is a string in localStorage BUT in our JavaScript code, under the hood, our data is actually in JSON format (JavaScript Object Notation). So it HAS to be turned into strings in order to be stored in localStorage. To do that, thankfully we have the built-in JSON.stringify() method! (Now is the moment you might ask: "so, to retrieve the data from localStorage we will need to do the opposite, right? turn the strings back into JSON format?" yes absolutely!!! you got it! It gets done using the JSON.parse() method. We'll use it shortly.)

At this point, if we check our localStorage, we see this🤩:

Our storage is called "TODO-app storage" as we wanted, and it is an empty array [].

2- Let's store each new task added by the user, in the storage!

1- const todo = { task: input.value }; : this is what the user types in the input and that we display on the screen. we declare a "todo" variable to be an object with a property we choose to call "task", which stores the value (the text) that gets typed in the input by the user.
2- todoStorage.push(todo); : easy array method push()to add the todo to the array todoStorage, the empty one we created earlier.
3- localStorage.setItem("TODO-app storage", JSON.stringify(todoStorage)); : now we set the Local Storage content to be that of our array todoStorage!
let's wrap all that in a function that we could call storeTodos():

function storeTodos(){
const todo  = {task: input.value};
todoStorage.push(todo);
localStorage.setItem("TODO-app storage", JSON.stringify('todoStorage'));
}

Let's invoke that function when the submit button is clicked for example!
We should see our localStorage in action!

3- Let's display all the todos stored in the localStorage after the user refreshes the browser or even closes the window and comes back!

We'll manage to do that in 2 steps:
1- a function to display the todos:

function displayTodos() {
 const todoStorage = JSON.parse(localStorage.getItem('TODO-app storage')) || [];
 todoStorage.forEach((todo) => {
    const userItem = `<li class="my-css">
                      <i class="far fa-square"></i>                     
                      <p class="my-css">${todo.task}</p>
                      <i class="far fa-trash-alt"></i>
                     </li>`;
    document.querySelector(".todo-list").insertAdjacentHTML("beforeend", userItem);
  }
}

Quick breakdown of this code:

JSON.parse(localStorage.getItem('TODO-app storage')) : this is the JSON.parse() method we were talking about earlier! When we save data to the storage: we need to JSON.stringify(). when we get our data from the storage, we need to JSON.parse().
||[] : it means todoStorage is either the JSON.parse() of todoStorage (which means it exists) OR || it's an empty array (if nothing has been stored yet)
As you can see the rest is a DOM manipulation using template literal (very handy to render dynamically created HTML) + the insertAdjacentHTML() method!
both <i class="far fa-square"></i> and <i class="far fa-trash-alt"></i> are from Fontawesome! The <i> tags mean "icon" and allow us to display Fontawesome library icons! If you don't know Fontawesome, click here to check it out!

2- adding an event listener to the window to detect when the page gets refreshed (or closed and reopened). It is called the DOMContentLoaded event. It's another event we can listen too, just like 'click' or 'keydown'!
We'll invoke the displayTodos function at that moment:

window.addEventListener('DOMContentLoaded', displayTodos);

Aaand that's a wrap!! The users of our TODO-app can refresh the page or close and reopen the browser: their list will still be on screen, like a real application!😎

That was it for today about the Local Storage!
I hope this article was somewhat helpful or that it could give you some inspiration/ideas for your own projects.

Let me know in the comments below if there's any aspect you would like me to develop further or if you have any question/remark/suggestion.

For now, thank you for reading.

Next article next week!🤙🏾