Follow JavaScript Essentials on Instagram to learn JS through snapshot of code snippets — https://instagram.com/javascriptessentials/

Because structuring an app is like building a house…

Image for post
Image for post

Structuring an app is like building a house 🏡 There are many decisions to make, many views, many perspectives. Folder structure also plays a vital role. The mind is flooded with questions like where this folder/file should reside? Which place it should go to? What should be the name of the folder, file, component, hook or context?

I normally choose the create-react-app to create a react app as it’s easy to kick-start development in no time & all the tools 🛠 like basic CSS file, build scripts, basic testing framework & PWA are…


styled-components is an approach to writing CSS, in JavaScript. It has all the features which enhance the styling of React components

Image for post
Image for post
  • Automatic critical CSS — No unnecessary code on your page, only renders the CSS when the components are injected into a page
  • Dynamic styling — It adapts the styling of a component based on the props
  • Supports Global CSS
  • Supports Server Side Rendering (SSR)
  • Automatic vendor prefixes
  • Unique class names, that means no class names bugs

I use styled-system to pair with styled-components. It makes the Component Orient Design lifestyle easy 😊 The style functions API of the styled-system exposes powerful props and with that leverage, it makes the styled-components even more powerful 💪 and we can use those props…


Not Knowing Everything Is Okay

Image for post
Image for post
Photo by Artem Sapegin on Unsplash

People assume that being in any industry for more than a few years one should know just about everything. That’s so not true! In this post, I am listing out the things which I’m not aware of or currently learning.

List of things I don’t know:

  • Unix commands and bash — I can manage with ls, cd and the world-famous rm -rf Can manage with grep but for everything else, I’ve to lookup.
  • CSS Methodologies — No BEMs, No OOCSS. I can do plain CSS. Currently using Tailwind CSS or styled-components. CSS-in-JS is the one I’m rocking now🤘
  • TypeScript — Type checking in JavaScript is not…


Image for post
Image for post

Hooks were a new addition in the release of React 16.8. They let you use state and other React features without writing a class component.

The useEffect hook is the Jack of all trades 👑 of the hooks. It’s the combination of componentDidMount, componentDidUpdate and componentWillUnmount. It's used for fetching the data when a component mounts, execute stuff when state or props change, Clean up stuff when the component unmounts. This useEffect hook can be really confusing 💡 until you understand or know how it works.

In this article…


Image for post
Image for post

Gatsby offers out of the box support to write the content in markdown and create pages easily in your app and with the leverage of many Gatsby Plugins, we can do many things like format code snippets, lazy load images, generating an RSS feed, creating a Sitemap, making SEO easier and a lot more 🥳

Writing a blog post in markdown is easier, no need to worry about styling, # makes H1, ## makes H2, the normal text makes a paragraph, adding links, images and so on.

But how to style the markdown content when the pages are generated, the…


Image for post
Image for post
Photo by SpaceX on Unsplash

GitHub Pages is a website holder for you & your projects. You can host your code directly from your GitHub repo. This article will help you how to manage your app in the master branch and deploy the code in the gh-pages branch easily.

You can choose any front-end framework like React, Vue, Gatsby, Next, Nuxt, Gridsome, and build the app in the master branch and build the code using the npm run build command and host directly using the gh-pages branch.

The quickest way to put your app to GitHub Pages is by using a package — gh-pages.

npm…


Write about your experience, learnings about JavaScript 💛. JSE will provide a home for your article 🥳

Submit your work

If you’re interested in writing for a publication, please get in touch by sending an email to Chetan at jsessentials3@gmail.com with your name and your Medium username and I will add you as a writer or you can send a DM on Instagram as well.

How to write articles

  1. Reading time: minimum 3 minutes
  2. Add a cover image
  3. Title & Subtitle
  4. Emojis 🥳😂
  5. Recommend to use Grammarly.
  6. Tag: JavaScript Essentials

Add this image at the end of the article with the caption

Image for post
Image for post
Please follow https://www.instagram.com/javascriptessentials on Instagram to learn JavaScript 💛 through a snapshot of code snippets


Image for post
Image for post

Recoil works and thinks like React.

Definition

Recoil is an experimental state management system for React by Facebook. It offers several out of the box abilities which are difficult to achieve with React ⚛️ alone.

Recoil lets you create a data-flow graph that flows from atoms through selectors and down into your React components.

Advantages

Recoil helps you eliminate the unnecessary re-renders which happens while using the Context API or Redux.

Consider a scenario where an app is using the Context API when the state in the context is changed, all the components in which even the data is not changed will…


Image for post
Image for post

Definition

The optional chaining operator ?. permits reading the value of a property located deep within a chain of connected objects.

Optional chaining was introduced as part of the ES2020 standard.

Why this?

It changes the way we access the properties from the deep objects. Optional chaining makes your code look cleaner.

Consider this piece of code, where the data object has a query and an answer to the query.

To access the value, you have to write a long conditional statement which is difficult to read and format 😢

But with optional chaining, you can access the value easily 😃 and you…


The context path is the prefix of a URL path that is used to select the context(s) to which an incoming request is passed.

Image for post
Image for post

Context path is also known as sub-path or sub-directory

Many apps are hosted at something other than the root (/) of their domain. For example, My personal blog is live at [https://chetanraj.in/blog,](https://chetanraj.in/blog) or you can host your site on GitHub Pages at https://example.github.io/blog.

Each of these sites need a prefix added to all paths on the site. So a link to a blog which is having the slug “/features-in-es6/” should be rewritten as “/blog/features-in-es6.

In addition…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store