Discussion on: React not easy to learn?

[Andrew Baisden]

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.

import { useState } from 'react';

function App() {
    const [list, setList] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
    return (
        <div className="App">
            <div>
                {list.map((item) => (
                    <ul key={item}>
                        <li>{item}</li>
                    </ul>
                ))}
            </div>
        </div>
    );
}

export default App;

[Andrew Baisden]

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)

[Chloe]

Thanks I'm actually doing his Vue course so will take a look thanks

[Andrew Baisden]

I have his Vue course too so you know he’s a good teacher you will learn React well.

[Sami]

what about his react native course? do you recommennd that too?

[Andrew Baisden]

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.

[Chloe]

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

1. why does that make a difference?
2. why do I have to use state when I have an array of objects I want to render? This I really don't understand. I thought state was for larger apps?

let methodsList = arrayMethods.map((method) => <li className="list-group-item" key={method.name}><strong>{method.name}</strong> {method.method}</li>)

const Methods = () => {

return (
...
<ul className="list-group bg-danger">
          {methodsList}
      </ul>
...
    )
}

[Andrew Baisden]

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.

1. It is different because in my example I was using React for the state
2. Because state is basically a JavaScript object which can store a component's dynamic data which helps when figuring out what the component's behaviour is. The fact that state is dynamic allows a component to keep track of changing data in between react renders so that it can be dynamic as well as interactive in nature

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.