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

David Amour • Oct 26 '20

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.

Chloe • Oct 26 '20

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

David Amour • Oct 27 '20

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?

Chloe • Oct 27 '20 • 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.

David Amour • Oct 27 '20

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?

Chloe • Oct 29 '20

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

Andrew Baisden • Oct 25 '20 • 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;

Chloe • Oct 25 '20 • 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

why does that make a difference?
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 • Oct 25 '20 • 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.

It is different because in my example I was using React for the state
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.

Andrew Baisden • Oct 25 '20 • 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)

Chloe • Oct 25 '20

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

Andrew Baisden • Oct 25 '20

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

Tomasz Buszewski • Oct 25 '20

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

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.

Chloe • Oct 25 '20 • 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?

Tomasz Buszewski • Oct 26 '20

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

Post your whole code for reference ;)

Chloe • Oct 26 '20 • 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

Tomasz Buszewski • Oct 27 '20

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

ilyas • Jul 12 '23 • 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...

Seanmclem • Oct 26 '20

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

Chloe • Oct 26 '20

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