Chloe

Posted on Oct 25, 2020 • Updated on Oct 29, 2020

React not easy to learn?

#react #javascript

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>

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 (23)

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

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

David Amour • Oct 30 '20

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

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.

Sami • Oct 25 '20

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

Andrew Baisden • Oct 25 '20

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.

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