DEV Community

Cover image for Essential JavaScript Building Blocks for React
James Cox
James Cox

Posted on • Edited on

4

Essential JavaScript Building Blocks for React

Recently I had a conversation with my good friend Julio 🌮 about the minimum required JavaScript concepts to get started with React. I realized in that discussion with Julio that I have been building apps with React for over a year now, but I have never considered which JavaScript concepts and patterns are common in React.

With the help of my other good friend Katherine, we came up with the following list:

  • array methods: map(), filter(), find() and reduce()
  • template literals (string interpolation)
  • functions/arrow functions
  • array destructuring
  • object destructuring
  • spread operator
  • default parameters in functions
  • conditionals
  • ternaries
  • &&, ||, ??
  • async functions/promises

Feeling a bit like Spongebob and Gary yet??

Spongebog and Gary surrounded by an extremely long list

If you are looking at this list and feeling overwhelmed, I am confident that when you have completed this series, you will feel much more comfortable diving into React.

The purpose of this JavaScript Essentials for React series is two-fold:

  1. Help others trying to break into React. I have strong opinions in favor of learning a framework like React even if your JavaScript isn't as strong as you'd like it to be.
  2. Reinforce my own understanding of these core JavaScript concepts. During my talk with Julio, I quickly realized where my own gaps are. Through the process of looking at documentation and coming up with examples to explain a particular fundamental, I felt as though I learned just as much as Julio!

Disclaimers

Final Thoughts

  • Each concept listed above will receive its own post
  • I will update this post with a link to each one as they are created
  • I will make this post Part 1 in the series
  • I might change the order in which I work through this list, depending on if some topics require knowledge of a previous topic.

As always, THANK YOU SO MUCH for reading my posts and I look forward to creating this series and sharing it with everyone. I know there are probably hundreds of similar posts on this topic, but like I previously mentioned, this series is just as much for me as it is for others!

First up is array methods (map, forEach, filter, find, reduce, etc.)

Alright y'all, its...
Oscar Martinez from The Office saying

AWS Q Developer image

Your AI Code Assistant

Automate your code reviews. Catch bugs before your coworkers. Fix security issues in your code. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Ask anything about your entire project, code and get answers and even architecture diagrams. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Start free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay