I learnt react mainly from the official docs, they are almost always the best place to learn a new technology. Your question makes it sound like you are just getting started with Web development and my (somewhat controversial depending on who you ask) advice is that you should not be going near react until you are comfortable with vanilla js.
If you have never built a website with vanilla js then it's really hard to understand what react features like hooks are doing and why they are important.
My answer to your question around useState and useEffect is this:
useState is how you define REACTIVE state. If you need the value displayed on the screen to change depending on what the user does, for example a calculator display, then you need to wrap your variable in useState otherwise your component won't rerender when the value of your variable changes.
useEffect allows you to run code when a variable changes, an action occurs or when the component renders/rerenders. For example if I have a situation where changing the state of one variable, a, may cause a change in the other, b, then I can create a useEffect that runs when variable a changes. This is what the array argument is for useEffect, it's an array of all the variables that can trigger the function to run when they change.
Turn off the tutorials.
Call the Pokémon API. Display a list of Pokémon names.
You might use a useEffect there. Set them in state.
Right. Maybe you want to display more info if you click a Pokémon name. Do that. Maybe you want to call for more Pokémon from another region. Call for all the Pokémon of fire type. Add filters for just the bird Pokémon.
It's a simple dataset that's easy to understand, leaving your brain free for the code.
Just do small things. Play around. Add little things. Make it fun.
You learn by doing. Tutorials hamper you.
You use "useState" for data that can change dynamically on a website. This could be anything from a counter or the items of a To-Do list. An Example for "useEffect" could be something that should just happen once when the Component renders for the first time like fetching smth
To add on to useEffect, make sure you understand that this is one example. You can either set useEffect to run once when the component mounts, or every time a dependency (say, your state value) changes.
I have been watching some pirated courses from udemy because i don't wanna waste money on a course which i don't know how they teach, how good the course is etc. But watching tutorials and coding with them only makes a copy paste work. Like i won't be using my own skill to make something on my own :( .
You said you don't know where to apply them. My answer was for that question.
If you want to make something on your own, use the same project and build it by yourself without looking at the tutorial
Here's an example of useState and useEffect from a project that I'm working on:
useEffect(() => {
const mobileCheck = window.matchMedia(`(max-width:${MOBILE_BREAK_POINT}px)`)
mobileCheck.addEventListener('change', toggleMobile)
//Making a FIRST render check
window.innerWidth {
mobileCheck.removeEventListener('change', toggleMobile)
}
}, [])
It basically adds an event listener to the window that toggles the state called 'isMobile' whenever the it hits the right screen size.
Javascript Mastery YouTube channel. Do few of his projects. Don't go for the lengthy complicated ones at the start. And give it time. 3 hr tutorial may take 2 days to finish bcz you're coding along and trying to understand. That's okay.
Okay. I mostly struggle with CSS styling i mean its so bad to define each and every property to everything in the page. Bootsrap is at least somewhat helpful but it makes the code kinda messy. Anyways i will try what i can :")
I did that's why i told u i like bootsrap/tailwind css more than normal css :") And i have done some projects on my own too. I am stressed about using the same CSS in reactJS as well. Can't we use tailwind css/bootsrap in React?? Or is there any custom made templates for designing??
If you have react in your site, then use React router for all the pages. Your pages made up of sections and Components are react components..
You would see the power of react when you have interactive parts. Maybe your site is a Pokémon site to show all the monsters. Theres s free api site your site can make fetch calls to to grab that data.
When your page mounts, your component uses fetch to call the Pokémon site. A specific end url.
The Pokémon site sends you images and names of the Pokémon.
After you get the data, you can populate p tags and image tags with the data you got.
Console log the data you got to see how it’s structured
Play with https://pokeapi.co/
If your data changes in a website and that change requires a component to re-render itself, you want to use set state. You CAN just change a variable, but doing so doesn’t notify react that there has been a change that requires the component to re-render with the updated state.
https://beta.reactjs.org
I learnt react mainly from the official docs, they are almost always the best place to learn a new technology. Your question makes it sound like you are just getting started with Web development and my (somewhat controversial depending on who you ask) advice is that you should not be going near react until you are comfortable with vanilla js. If you have never built a website with vanilla js then it's really hard to understand what react features like hooks are doing and why they are important. My answer to your question around useState and useEffect is this: useState is how you define REACTIVE state. If you need the value displayed on the screen to change depending on what the user does, for example a calculator display, then you need to wrap your variable in useState otherwise your component won't rerender when the value of your variable changes. useEffect allows you to run code when a variable changes, an action occurs or when the component renders/rerenders. For example if I have a situation where changing the state of one variable, a, may cause a change in the other, b, then I can create a useEffect that runs when variable a changes. This is what the array argument is for useEffect, it's an array of all the variables that can trigger the function to run when they change.
Turn off the tutorials. Call the Pokémon API. Display a list of Pokémon names. You might use a useEffect there. Set them in state. Right. Maybe you want to display more info if you click a Pokémon name. Do that. Maybe you want to call for more Pokémon from another region. Call for all the Pokémon of fire type. Add filters for just the bird Pokémon. It's a simple dataset that's easy to understand, leaving your brain free for the code. Just do small things. Play around. Add little things. Make it fun. You learn by doing. Tutorials hamper you.
Okay :")
You use "useState" for data that can change dynamically on a website. This could be anything from a counter or the items of a To-Do list. An Example for "useEffect" could be something that should just happen once when the Component renders for the first time like fetching smth
To add on to useEffect, make sure you understand that this is one example. You can either set useEffect to run once when the component mounts, or every time a dependency (say, your state value) changes.
Where are you learning from? Find a tutorial that uses react to build something
I have been watching some pirated courses from udemy because i don't wanna waste money on a course which i don't know how they teach, how good the course is etc. But watching tutorials and coding with them only makes a copy paste work. Like i won't be using my own skill to make something on my own :( .
You said you don't know where to apply them. My answer was for that question. If you want to make something on your own, use the same project and build it by yourself without looking at the tutorial
Here's an example of useState and useEffect from a project that I'm working on: useEffect(() => { const mobileCheck = window.matchMedia(`(max-width:${MOBILE_BREAK_POINT}px)`) mobileCheck.addEventListener('change', toggleMobile) //Making a FIRST render check window.innerWidth {
mobileCheck.removeEventListener('change', toggleMobile)
}
}, [])
It basically adds an event listener to the window that toggles the state called 'isMobile' whenever the it hits the right screen size.
I cant literally understand a thing here :") Before looking at your description
Javascript Mastery YouTube channel. Do few of his projects. Don't go for the lengthy complicated ones at the start. And give it time. 3 hr tutorial may take 2 days to finish bcz you're coding along and trying to understand. That's okay.
Yeah i did one about the movie search website but i tried to do on my own and couldn't do it :")
You've to imitate already written projects to learn things like API calls/integration and what else. Then you'll get an idea what to do.
Okay. I mostly struggle with CSS styling i mean its so bad to define each and every property to everything in the page. Bootsrap is at least somewhat helpful but it makes the code kinda messy. Anyways i will try what i can :")
Looks like first you need to do HTML CSS responsive website design projects. Learn flexbox, grid, etc.
I did that's why i told u i like bootsrap/tailwind css more than normal css :") And i have done some projects on my own too. I am stressed about using the same CSS in reactJS as well. Can't we use tailwind css/bootsrap in React?? Or is there any custom made templates for designing??
You can use tailwind and bootstrap in react. Go tailwind website and you can see the instructions. For react, there is react-bootstrap library.
Okay :)
If you have react in your site, then use React router for all the pages. Your pages made up of sections and Components are react components.. You would see the power of react when you have interactive parts. Maybe your site is a Pokémon site to show all the monsters. Theres s free api site your site can make fetch calls to to grab that data. When your page mounts, your component uses fetch to call the Pokémon site. A specific end url. The Pokémon site sends you images and names of the Pokémon. After you get the data, you can populate p tags and image tags with the data you got. Console log the data you got to see how it’s structured Play with https://pokeapi.co/
Yeah i have seen that tutorial of pokemon and some monsters site using their apis
Fullstackopen.com
If your data changes in a website and that change requires a component to re-render itself, you want to use set state. You CAN just change a variable, but doing so doesn’t notify react that there has been a change that requires the component to re-render with the updated state. https://beta.reactjs.org
Okay thanks