DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Chloe
Chloe

Posted on • Updated on

React not easy to learn?

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. Everyone seems to suggest React is just JS and JSX it's easy to learn. Is it? It just seems so alien to me I thought having dabbled a bit with Gatsby I know the basics of using JSX and I know some ES6 stuff I can learn React... it's turning out to be much more difficult than I thought.

For a start I don't like the docs (imo Vue docs are much better) I don't find them helpful for example I was trying to render an array of objects which apparently is not allowed in React (why?) all the example in the docs shows is a basic array of numbers? In the end I found an answer on SO so in the end did this:

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

...
<ul className="list-group bg-danger">
  {methodsList}
</ul>
Enter fullscreen mode Exit fullscreen mode

Perhaps I am approaching it wrong I don't know but I am confused and struggling to grasp bits of it does anyone have any resources that go over the key concepts?

Top comments (22)

Collapse
 
tomekbuszewski profile image
Tomek Buszewski

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:

const RenderArrayMethods = () =>
  arrayMethods.map((method) => (
    <li key={method.name}>
      <strong>{method.name}</strong> {method.method}
    </li>
  ));

export default function App() {
  return (
    <ul>
      <RenderArrayMethods />
    </ul>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
cguttweb profile image
Chloe Author • Edited on

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?

Collapse
 
tomekbuszewski profile image
Tomek Buszewski

Not really, passing functions also work: codesandbox.io/s/twilight-frog-462...

Post your whole code for reference ;)

Thread Thread
 
cguttweb profile image
Chloe Author • Edited on

Ah ok so does it matter which way you approach? Is there such a thing as best practice in React?

import React from 'react'

let arrayMethods = [
    // array of objects here
]

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

const Methods = () => {
    return (
        <div className="row">
          <div className="col-12 text-center">
            <input
            className="mb-3 p-2 align-center rounded"
            type="text"
            placeholder="Search for a method" />
      <form className="col-12 text-center">
        <input
          className="mb-3 p-2 rounded"
          id="methodname"
          placeholder="Method name"
          type="text"
        />
        <input
          className="p-2 rounded"
          id="method"
          placeholder="Enter method"
          type="text"
        />
        <input
          className="p-2 rounded"
          id="example"
          placeholder="Enter example"
          type="text"
        />
        <button className="btn btn-success" type="button">Add Method</button>
        <br />
      </form>
      </div>
      <div className="col-6">
      <ul className="list-group bg-danger">
          {methodsList}
      </ul>
    </div>
    {/* Textbox to show examples using methods */}
      <div className="col-6 pl-0">
        <textarea
          className="bg-dark col pt-3 text-white"
          name="exampleBox"
          id="exampleBox"
          rows="20"
        ></textarea>
      </div>
    </div>
    )
}

export default Methods

Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
tomekbuszewski profile image
Tomek Buszewski

Yes, using components is preferable. Your code renders fine: codesandbox.io/s/magical-smoke-gz6...

Collapse
 
thedaveamour profile image
David Amour

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.

Collapse
 
cguttweb profile image
Chloe Author

Thanks for the reply. I've watched a few things and dabbled with Gatsby any recommendations for React based resources?

Collapse
 
thedaveamour profile image
David Amour
Thread Thread
 
cguttweb profile image
Chloe Author • Edited on

Is it? I have no idea haha very much a beginner trying to get to grips with the syntax and thanks for the links.

Thread Thread
 
thedaveamour profile image
David Amour

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?

Thread Thread
 
cguttweb profile image
Chloe Author

Nope purely front end and UI stuff and I've very little about that yet let alone anything else :D

Thread Thread
 
thedaveamour profile image
David Amour

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

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited on

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;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cguttweb profile image
Chloe Author • Edited on

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>
...
    )
}

Enter fullscreen mode Exit fullscreen mode
Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited on

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.

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited on

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)

Collapse
 
cguttweb profile image
Chloe Author

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

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

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

Thread Thread
 
sami_hd profile image
Sami

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

Thread Thread
 
andrewbaisden profile image
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.

Collapse
 
seanmclem profile image
Seanmclem

React can be a shock at first, but a little time and patience is all it takes

Collapse
 
cguttweb profile image
Chloe Author

I'll get there eventually I think I underestimated things slightly (read a lot :D)

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post