Which type are you?
JavaScript First, Then React.
Or,
JavaScript ✛ React
⇩
JavaScript First, Then React.
Or,
JavaScript ✛ React
⇩
📖 How and when to start React?
There are 3 approaches:
➊ Complete JavaScript. Then, start React.
➋ Learn the essentials of JavaScript. Then, start React. Finally, learn advanced JavaScript.
➌ Start React. Learn JavaScript alongside.
There are 3 approaches:
➊ Complete JavaScript. Then, start React.
➋ Learn the essentials of JavaScript. Then, start React. Finally, learn advanced JavaScript.
➌ Start React. Learn JavaScript alongside.
💭 Which one is the best?
⬘ JavaScript is a language, while React is a JavaScript-based library.
⬗ Looking at the popularity of React, few people directly start learning React without much prior knowledge of JavaScript. Is this a good idea?
⬘ JavaScript is a language, while React is a JavaScript-based library.
⬗ Looking at the popularity of React, few people directly start learning React without much prior knowledge of JavaScript. Is this a good idea?
⬙ Whichever approach you may take, it's important to know what JavaScript concepts will make your React journey effective and smoother.
⬖ We will discuss those essential concepts in this thread.
⬖ We will discuss those essential concepts in this thread.
📋 Essentials JavaScript topics for React
➊ Basics
➋ String Methods
➌ Array Methods
➍ Array Destructuring
➎ Array Spread
➏ Object Destructuring
➐ Object Spread
➑ Template Literals
➒ ES Modules
➓ APIs & Others
➊ Basics
➋ String Methods
➌ Array Methods
➍ Array Destructuring
➎ Array Spread
➏ Object Destructuring
➐ Object Spread
➑ Template Literals
➒ ES Modules
➓ APIs & Others
➊ Basics
➀ Variable
➤ Declaration
➤ Scope
➤ Hoisting
➤ Assignment
➁ Functions
➤ Declarations
➤ Expressions
➤ Arrow Functions
➤ Callbacks
➤ Closure
➀ Variable
➤ Declaration
➤ Scope
➤ Hoisting
➤ Assignment
➁ Functions
➤ Declarations
➤ Expressions
➤ Arrow Functions
➤ Callbacks
➤ Closure
➂ Operators
➤ Arithmetic
➤ Assignment
➤ Comparison
➤ Logical
➃ Literals
➤ String
➤ Array
➤ Object
➄ Condition & Looping
➤ if, if...else
➤ for, for...in, for...of
➤ while, do...while
➤ Arithmetic
➤ Assignment
➤ Comparison
➤ Logical
➃ Literals
➤ String
➤ Array
➤ Object
➄ Condition & Looping
➤ if, if...else
➤ for, for...in, for...of
➤ while, do...while
➋ String Methods
➤ toLowerCase()
➤ toUpperCase()
➤ charAt()
➤ substring()
➤ slice()
➤ includes()
➤ startsWith()
➤ endsWith()
➤ indexOf() / lastIndexOf()
➤ match() / matchAll()
➤ replace() / replaceAll()
➤ repeat()
➤ trim()
➤ toLowerCase()
➤ toUpperCase()
➤ charAt()
➤ substring()
➤ slice()
➤ includes()
➤ startsWith()
➤ endsWith()
➤ indexOf() / lastIndexOf()
➤ match() / matchAll()
➤ replace() / replaceAll()
➤ repeat()
➤ trim()
➌ Array Methods
➤ forEach()
➤ map()
➤ reduce()
➤ flat()
➤ flatMap()
➤ find()
➤ filter()
➤ slice()
➤ splice()
➤ push()
➤ pop()
➤ shift()
➤ unshift()
➤ some()
➤ every()
➤ forEach()
➤ map()
➤ reduce()
➤ flat()
➤ flatMap()
➤ find()
➤ filter()
➤ slice()
➤ splice()
➤ push()
➤ pop()
➤ shift()
➤ unshift()
➤ some()
➤ every()
➍ Array Destructuring
It's frequently used in hooks esp. useState()
Example:
⇥ const [fruits, setFruits] = useState([]);
Know more:
It's frequently used in hooks esp. useState()
Example:
⇥ const [fruits, setFruits] = useState([]);
Know more:
➎ Array Spread
There are so many use cases. One of the places where we frequently spread an array is adding/updating/removing an item from the state.
Example:
Add an item to the start of Array
⇥ let newArray = [itemToAdd, ...oldArray]
Know more:
There are so many use cases. One of the places where we frequently spread an array is adding/updating/removing an item from the state.
Example:
Add an item to the start of Array
⇥ let newArray = [itemToAdd, ...oldArray]
Know more:
➏ Object Destructuring
⬘ Properties are passed as an object parameter to our function component.
⬙ We can destructure it and, specify only those properties that we are going to use.
Example:
function MyComponent({name, address}) {
}
⬘ Properties are passed as an object parameter to our function component.
⬙ We can destructure it and, specify only those properties that we are going to use.
Example:
function MyComponent({name, address}) {
}
➐ Object Spread
We may spread an object to pass those to a child component.
Example:
function MyComponent({name, address, ...rest}) {
return <ChildComponent {...rest} />
}
We may spread an object to pass those to a child component.
Example:
function MyComponent({name, address, ...rest}) {
return <ChildComponent {...rest} />
}
➑ Template Literals
➤ Untagged Template Literals
➤ Tagged Template Literals
This is used in a few stylesheet libraries.
➤ Untagged Template Literals
➤ Tagged Template Literals
This is used in a few stylesheet libraries.
➒ ES Modules
➤ import
➤ import {}
➤ export
➤ export default
➤ import
➤ import {}
➤ export
➤ export default
➓ APIs & Others
➤ DOM API
Very important to learn how React handles DOM, events.
➤ Promise API
➤ async...await
These 2 are not mandatory though.
➤ Fetch API
Not a mandatory skill. Learn to make API calls.
➤ DOM API
Very important to learn how React handles DOM, events.
➤ Promise API
➤ async...await
These 2 are not mandatory though.
➤ Fetch API
Not a mandatory skill. Learn to make API calls.
🏁 Final Words
⬘ Learning methods vary from person to person.
⬖ Remember, React is a JavaScript library. JS knowledge is definitely needed. How and at what time you learn is tricky.
⬙ To start using React, learn the necessary JavaScript concepts.
Happy React journey.
⬘ Learning methods vary from person to person.
⬖ Remember, React is a JavaScript library. JS knowledge is definitely needed. How and at what time you learn is tricky.
⬙ To start using React, learn the necessary JavaScript concepts.
Happy React journey.
📗 Book Review
TDD is powerful and will definitely help you whether you are a fresh learner or have been practicing React for a long.
I got a chance to read this book recently thanks to @Anamika87522262. It's really awesome.
Its 2nd edition is recently launched. Have a read.
TDD is powerful and will definitely help you whether you are a fresh learner or have been practicing React for a long.
I got a chance to read this book recently thanks to @Anamika87522262. It's really awesome.
Its 2nd edition is recently launched. Have a read.
Hey 👋
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✰ Tutorials
✰ Tricks
✰ Career Tips
✰ Cheat Sheets
✰ Interview Questions
✰ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
I am a Tech Writer, Educator, and Mentor from India 🇮🇳, here sharing
✰ Tutorials
✰ Tricks
✰ Career Tips
✰ Cheat Sheets
✰ Interview Questions
✰ Project Ideas
on
➠ Web Development
➠ Data Structures and Algorithms
➠ Databases
Thanks for reading. 🙏
Link to download:
packt.link
packt.link
جاري تحميل الاقتراحات...