DEV Community

10 JavaScript concepts for React Beginners

Sm0ke on April 09, 2022

React is a Javascript frontend library and if you want to get started with React first you have to learn Javascript, the programming language that ...

Read full post

Lou Cyx • Apr 10 '22

A few missing things I noticed where missing or incomplete:

Functions definitions: Arrow functions don't need the return keyword always, so you can write that subtract function like this:

const subscract = (num1, num2) => num1 - num2;

And App like this:

const App = () => (
    <div className="App">
        <h1>Hello world!</h1>
    </div>
);

Classes and the Extend keyword: Worth mentioning that nowadays you don't need classes for components in React (Error boundaries are the only exception, and you can still use npm dependencies to not use classes for that either).
Async/Await: Before learning async/await is key folks understand Promises. An example of that getPersonsInfo function without async/await to illustrate:

const getPersonsInfo = name =>
    server
        .getPeople()
        .then(person => person.name === name)
        .then(console.log)
        .catch(console.error);

Is also important to notice that using async functions in side effects with useEffect is far from ideal.

Array methods: Important resource when working with React: doesitmutate.xyz/ ... that site shows which methods change the original data and which ones don't. You should try to avoid mutations in React, so stay away from the methods that change the original data.
Template Literal: They are way more powerful than plain strings, because they also provide a way of using a function next to them. More info here. I use that approach in one of my libs.
Deconstructing: Deconstructing is quite convinient in function components, and can be done directly on the head of the function:

const Greeting = ({ name }) => <div>hello {name}</div>;

And also is worth mentioning that you can set default values for optional properties:

const Greeting = ({ name = "world" }) => <div>hello {name}</div>;

Also, your example has a typo when deconstructing objects.

Spread Operator: To concat arrays, nowadays is still faster to use Array.prototype.concat, but for stuff like copying object properties is actually really convenient.
Import and Export: In the export example you're missing the export keyword. And is also important to mention that you can import and export named and default, so ideally we should have 4 examples.
Code Hello World project with React: You mention a link to download Node, but didn't provided it. Also the command to run create-react-app is actually:

npm init react-app

And the default app is already a "hello world" of sorts, so idk if this point makes much sense.

That's it! Cheers!

Sm0ke • Apr 10 '22

Hello @lukeshiru

Ty for reading the article.
Noted all your remarks

🚀🚀

Sm0ke • Apr 10 '22

Just PM you on Twitter.
🚀🚀
In case you have time for a small chat, thanks in advance.

MMK2020 • Apr 10 '22

Nice article. Thanks

Samitha Wijesekara • Apr 10 '22

This is really important for the react developers. Article is clean and can understand concepts simply. Thank you for sharing. ♥️

Sm0ke • Apr 10 '22

Ty for reading Samitha.
🚀🚀

WebsiteMarket • Apr 9 '22

This is great, ty!

Sm0ke • Apr 9 '22

🚀🚀

admin-dashboards • Apr 10 '22

Nice ..

Sm0ke • Apr 10 '22

🚀🚀

Luke Bangs • Apr 10 '22

This is a really really good breakdown of the concepts and a few things have just clicked in my mind thanks to reading this. Cheers!

Sm0ke • Apr 10 '22

Ty for reading @bangsluke
🚀🚀

Zoltán Szőgyényi • Apr 9 '22

Thanks for the article!

Sm0ke • Apr 9 '22

🚀🚀

MyCharts • Apr 9 '22

Nice tutorial.

Sm0ke • Apr 9 '22

🚀🚀

ui-themes • Apr 9 '22

Really useful

Sm0ke • Apr 9 '22

🚀🚀

Joshua Needham • Apr 10 '22

Nice overview. You have a misspelling in your subtract function example, FYI. It would also be helpful and raise some questions if you mention anonymous vs named functions. Thanks for the breakdown.

Sm0ke • Apr 10 '22

Noted & ty for reading!
🚀🚀

Vuyani Daweti • Apr 9 '22

DOMs

Sm0ke • Apr 9 '22

Noted. 🚀🚀

kevincp17 • Apr 9 '22

Thanks dude, gonna need this in the future👍

Sm0ke • Apr 9 '22

🚀🚀