I am a complete newbie to React however as someone who knows some Vue I am currently attempting to rebuild a Vue app and it'#s not going that well....
For further actions, you may consider blocking this person and/or reporting abuse
Hey!
First of all, everything is hard before it becomes easy. Don't get discouraged by initial setbacks ;-)
About your code, React is perfectly fine with rendering arrays of objects. Only, it prefers to have components instead of functions (which work too, but it's not the "React way", apart from some edge cases). That's why you could refactor your code to do the following:
Here, we have a component,
RenderArrayMethods
(note the capital first letter) which is nothing more than a function, and then we execute it using JSX notation.Also, React is all about passing props, so try to modify your example to accept
arrayMethods
as a prop and then render it the way you would do normally.Ah ok so because I was trying to render it in the functional component that is why it was throwing the error with the objects array?
Not really, passing functions also work: codesandbox.io/s/twilight-frog-462...
Post your whole code for reference ;)
Ah ok so does it matter which way you approach? Is there such a thing as best practice in React?
Yes, using components is preferable. Your code renders fine: codesandbox.io/s/magical-smoke-gz6...
I am also studying React. I have been doing so for about a month now and converting an asp.net MVC app to React with REST. Its been slow going but I feel once I understand something I like it. I try and learn to do one thing at least every day and then keep notes and links. YouTube is really good. I've been a full stack dev for 21 years.
Thanks for the reply. I've watched a few things and dabbled with Gatsby any recommendations for React based resources?
I'm only a few weeks into studying React but everytime I find a useful page or youtube video I add it into my faves. I can send them over....
en.wikipedia.org/wiki/React_(web_f...
stackoverflow.com/questions/564214...
youtube.com/watch?v=TjnyFNxQ67Y
reactjs.org/docs/composition-vs-in...
stackoverflow.com/questions/399679...
stackoverflow.com/questions/451726...
upmostly.com/tutorials/react-oncli...
reactjs.org/blog/2015/09/02/new-re...
codeinwp.com/blog/react-ui-compone...
material-ui.com
youtube.com/watch?v=hQAHSlTtcmY&t=...
youtube.com/watch?v=Ke90Tje7VS0
youtube.com/watch?v=Law7wfdg_ls
youtube.com/watch?v=vu_rIMPROoQ
reactjs.org/docs/components-and-pr...
youtube.com/watch?v=T3Px88x_PsA
youtube.com/watch?v=wwl6iH5D0LU
reactrouter.com/web/api/Link
I guess REST is also important for React - how are you dealing with that?
Is it? I have no idea haha very much a beginner trying to get to grips with the syntax and thanks for the links.
REST would refer to what you do with server side stuff. React is for building rich and responsive user interfaces but at some point you need to grab some data from a server or save some data to a server. Have you looked at that yet?
Nope purely front end and UI stuff and I've very little about that yet let alone anything else :D
Ok that's fine. If you are planning on being a front end developer only that is perfectly ok and as such you would not be coding any REST services or other types of web services but you would need to write the client code to consume them.
Check out youtube.com/watch?v=T3Px88x_PsA for example
React is fairly easy once you get used to the syntax. I think there are errors in your code try my code below put it in your
app.js
file and it should work.Thanks for the reply. My code for rendering the list works? It renders the list fine so what's wrong with it? array-helper-react.vercel.app/
Not sure how my code is that different except I have the list.map bit separate but couple of questions
Oh my bad I was just heading off to eat dinner I sort of browsed through your post 😅 I just re-read what you wrote so you found a working solution on Stackoverflow cool. So all you need is good resources for React I know a few that worked well for me.
State is not for larger apps you should be using state with all Javascript frameworks even Vue uses state. I think you are thinking of Redux if you are working on a larger application then yes a state library like Redux would be much better.
This course is excellent for Learning React it is one of the courses I used and still use for reference React - The Complete Guide (incl Hooks, React Router, Redux)
Thanks I'm actually doing his Vue course so will take a look thanks
I have his Vue course too so you know he’s a good teacher you will learn React well.
what about his react native course? do you recommennd that too?
Good question. React Native is something I’m learning at the moment but I don’t currently have his course on it. I have just been using the docs and some YouTube videos because I already know React. Honestly he puts out good courses and he tends to keep them all up to date. I’m not sure if his current React Native course is current however if you go get it then it’s highly likely it will be updated eventually.
I stumbled upon DevXilyas.com while searching for the best React UI frameworks, and I must say it was a delightful surprise.
If you're looking for a comprehensive resource that offers top-notch recommendations and insightful reviews, look no further. devxilyas.com/best-react-ui-framew...
React can be a shock at first, but a little time and patience is all it takes
I'll get there eventually I think I underestimated things slightly (read a lot :D)