DEV Community

React not easy to learn?

Chloe on October 25, 2020

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....
Read full post
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 • • Edited

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 • • Edited

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 •

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 •

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?

Thread Thread
 
cguttweb profile image
Chloe • • Edited

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 •

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

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 • • Edited

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

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

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 •

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
 
ilyas19970 profile image
ilyas • • Edited

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

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 •

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