What basic js knowledge I need to get started with react?

[deepaknewjs]

Body

Hi guys, can you please help me, what basic Javascript knowledge I need for react. Can anybody note points to me what I need to cover is Javascript to learn React. Thank you in advance for your help.

Guidelines

• I have read and understood this category's guidelines before making this post.

[ebndev]

Hi @Yeabtsega1, thanks for wanting to participate in Discussions!

Please note: we’ve clarified our stance on using generative AI tools like ChatGPT within our Community via this announcement. Please review the guidelines to ensure your post meets them as failure to adhere to those rules can result in action taken by our moderator team. 

You can read our updated Code of Conduct and the announcement for more details. Thank you for helping us maintain an authentic and beneficial space for everyone.

[Nickolous]

Thank you for your reply. Can you please me the step by step how to learn JavaScript properly. The way on youtube and roadmap.sh shows is complicated for me. Can you please tell me proper way to learn and implement that code in poper manner. Thank you

[ebndev]

Hey @Nickolous, thanks for being a part of the GitHub Community!

Unfortunately there are no shortcuts to learning JavaScript and it may take a while, as React requires fundamentals of data structures and functions. With some time, it's definitely doable!

Here's the start of learning JavaScript with the 100devs course on YouTube that might be helpful!

Best of luck on your coding journey 🌟

[RafaelJohn9]

Stage 1: JavaScript Fundamentals

Variables and Data Types
    Learn about var, let, and const for variable declarations.
    Understand different data types: strings, numbers, booleans, objects, arrays, undefined, and null.

Basic Operators and Control Structures
    Arithmetic, comparison, logical, assignment operators.
    Conditional statements: if, else, switch.

Functions
    Function declarations and expressions.
    Arrow functions (=>).
    Parameters and return values.

Objects and Arrays
    Creating and manipulating objects and arrays.
    Array methods: map, filter, reduce, forEach, find.

Loops
    for, while, do...while loops.
    Iterating over arrays and objects.

Stage 2: ES6 Syntax and Features

Let and Const
    Differences between var, let, and const.
    Block scope vs. function scope.

Arrow Functions
    Syntax and advantages.
    Implicit return and this context.

Template Literals
    String interpolation using backticks (`).
    Multi-line strings.

Destructuring
    Extracting values from arrays and objects.

Spread and Rest Operators
    Using ... to expand arrays/objects.
    Rest parameters in functions.

Classes
    Syntax and structure.
    Constructor, methods, inheritance.

Modules
    Import and export syntax.
    Default and named exports.

Stage 3: JavaScript DOM Manipulation

Selecting Elements
    Methods: getElementById, querySelector, querySelectorAll.

Manipulating Elements
    Changing content: innerText, innerHTML.
    Modifying attributes: setAttribute, getAttribute.
    Adjusting styles: style property.

Event Handling
    Adding event listeners: addEventListener.
    Handling events: event objects, common event types (click, input, etc.).

Stage 4: Asynchronous JavaScript

Promises
    Creating and chaining promises.
    Handling success and failure: then, catch.

Async/Await
    Converting promises to async functions.
    Error handling with try/catch.

Fetch API/AJAX
    Making HTTP requests.
    Working with JSON data.

Stage 5: Advanced Concepts

Closures and Scope
    Lexical scoping rules.
    Understanding closures and their applications.

Error Handling
    Using try/catch blocks.
    Custom error handling.

Functional Programming Concepts
    Pure functions and immutability.
    Higher-order functions.
    Function composition.

Stage 6: JSX Syntax and React Basics

Understanding JSX
    JSX syntax and rules.
    Embedding expressions in JSX.

Functional Components
    Creating and using functional components.
    Passing props to components.

Class Components
    Creating and using class components.
    Lifecycle methods.

Learning Resources

Books and Documentation
    "Eloquent JavaScript" by Marijn Haverbeke
    "You Don’t Know JS" (book series) by Kyle Simpson
    MDN Web Docs (https://developer.mozilla.org/en-US/)

Online Courses
    FreeCodeCamp (https://www.freecodecamp.org/)
    Codecademy (https://www.codecademy.com/learn/introduction-to-javascript)
    Udemy and Coursera courses on JavaScript and React.

Practice Platforms
    LeetCode (https://leetcode.com/)
    HackerRank (https://www.hackerrank.com/domains/tutorials/10-days-of-javascript)
    Codewars (https://www.codewars.com/)

Practice and Projects

Small Projects
    Build a to-do list app.
    Create a simple calculator.
    Develop a weather app using Fetch API.

Advanced Projects
    Build a blogging platform.
    Develop a chat application.
    Create a full-stack app with a Node.js backend and React frontend.

[RafaelJohn9]

This is how I learned most of the programming concepts I know to be proud of yourself after every milestone no matter how small, the diver you deep the more complex it becomes but it'll be worth it

[subhajitorrin]

Variables and Constants
Data Types
Functions
Arrays
Objects
Arrow Functions
Template Literals
Promises and Async/Await
Modules (import/export)
DOM Manipulation
Events
Conditional Rendering
ES6+ Features (Destructuring, Spread Operator)
Understanding this
Error Handling (try...catch)
Browser APIs (e.g., localStorage, fetch)

You can finish these js topics then your should practice few basic projects. Then you can easily go for react.