Need 'React for dummies' help

Get Help React.js
,
#1

I’ve been working through the web dev path and quite happy with my progress since I’d never done any coding before last November, but I’m really struggling with React. I’ve almost completed the module but have tried to do a personal project and realised I have no idea what I’m doing.

I need someone to explain props, state and passing things between components in the simplest terms possible. Kind of on the ‘trying to explain to your grandparents how to use FaceTime’ level…

I found the entire module to be a case of ‘write this bit of code then move on to the next step’ and most of the time it wasn’t clear what I was trying to achieve or how the snippet of code I was writing would help me reach that goal. With the earlier HTML/CSS/JS lessons I managed to get a good grasp of it very easily but the React one seems to have a lot of holes in it.

Case in point 1: I’ve finished the Ravenous app but it’s not rendering properly. I have absolutely no idea why because I don’t know what any of the code I’ve written actually does, how the components all connect up, what each one is doing, anything like that.

Case in point 2: For a personal project I thought I’d build a simple travel website, where a user can type in a city and it then returns things like a weather forecast, popular tourist attractions, whatever other cool stuff I can find from APIs. I feel confident doing this in more simple HTML/CSS/Java coding but when I started trying to build it in React I realised I didn’t even know where to start.

I’d like to create a ‘Searchbar’ component which renders a search field then returns whatever the user inputs as a global variable ‘city’ to the top-level App.js file for use in other components. I realised I have no idea how to do this. Can build the constructor method, build the event handler, build the render function, but just getting it all to connect up seems totally beyond me.

TLDR - can someone explain props, state and passing info between components in language a total moron could understand…

Thanks in advance!

#2

I recommend looking at video tutorials talking about those very specific things. Youtube is often great at pinning down very specific ideas like those.

Another way is to get a book/e-book. You’d have to be hands on with it but it can walk you through certain situations.

React is not easy so don’t be discouraged! There’s no such thing as moron in learning, it’s just that these are tough topics.

2 Likes
#4

Thanks! I’ll do some reading. Any particular examples you could recommend?

I would also massively appreciate some help with this particular problem on my project discussed in OP, code posted below. So I’ve made a SearchBar component which seems to work, it will take a text input then set the component’s ‘searchResult’ state to whatever was in the text field when the Submit button is clicked. Now I’m trying to create a Weather component to use the OpenWeather API to get weather for this city. I’ve done this before in vanilla Javascript/HTML but I don’t understand how to access the search result from the SearchBar component in this component?

Sorry if it’s a stupid question but it really feels there’s some fundamental aspect I can’t understand. I feel like I’m learning to drive without knowing what the steering wheel does…

(All the h1 tags in the code are just temporary so I can keep an eye on things working…)

SearchBar component:

import React from 'react'

export class SearchBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            city: '',
            searchResult: ''
        }

    this.handleSearch = this.handleSearch.bind(this)
    this.Submit = this.Submit.bind(this)
    }

handleSearch(e) {
    const result = e.target.value; 
        this.setState({city: result})
}   

Submit(e) {
    this.setState({searchResult: this.state.city})
    e.preventDefault()
}



render() {
    return (
        <div className="searchbar">
        <form onSubmit={this.Submit}>
            <input id="search" type="text" placeholder="Enter a city..." onChange={this.handleSearch}/> 
            <input type="submit" value="Search" />       
        </form>
        <h1>{this.state.searchResult}</h1>
        
        </div>
    )
    }
}

Weather component so far:


import React from 'react'
import {SearchBar} from './searchbar'

export class Weather extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            city: SearchBar.searchResult
        }
    }


    render() {
        return (
            <div>
                <h1>{this.state.city}</h1>
            </div>
        )
    }
}

App component, for what it’s worth:

import logo from './logo.svg';
import './App.css';
import React from 'react'
import {SearchBar} from './components/searchbar'
import {Weather} from './components/weather'


function App() {
  return (
    <div className="App">
    <SearchBar city={''}/>
    <Weather />
    </div>
  );
}

export default App;

#5

I’d recommend the new O’reilly book but it’s mostly done in a functional style that seems to be the direction in which React is moving (so it might not be an easy read, but it’s worth it). They still cover classes slightly but they move away from it in the book.

As for getting the input from the text bar, (and other precise questions), when in doubt it’s always great to peruse through React’s documentation: https://reactjs.org/docs/forms.html not only because you get the answer, but you also get the most up-to-date warnings about changes and considerations coming up.

One tip I would suggest if you’re not already doing so, every time you add new lines of code I would test them on the console just to see how they’re affecting things. The properties and variables you write are often accessible in the console in some way or another and playing often with this helps when it comes to access them specifically.

#6

Yeah, I’m fine with the form but it’s the using state and props to pass its input between components bit that I’m struggling with. Honestly, I don’t understand it at all. Some fundamental bit of knowledge didn’t go in when I did the module and still won’t go in when I try and research it. I just need someone to tell me what to do and why doing that works, in the most basic way possible!

I’ve read a few tutorials today but they all seem to assume you understand how state and props are working. The part of my brain that can process that information has clearly been furloughed due to Covid…

#7

Try playing with this, it might give you an idea: learning-react-color-organizer-3 - CodeSandbox

State and props really require a lot of mental work. I had to take notes of my notes for it to sink into my brain in a way I could just wake up and say… yea that makes sense. (especially when it came to hooks, refs etc)

#8

OK, I’m baffled. Am I asking what I think is a simple question that’s actually something really complex?

I don’t understand how to pass variables, objects etc. from one component to another. To me it seems that’s one of the fundamental building blocks of React. I know it has something to do with props and state but honestly that’s where my understanding stops. I literally need someone to tell me how to do it. That’s it. I learn by doing - if I can write code that works, and I understand why it works, and I understand what it is trying to achieve and how it achieves that, I’ll grasp it in much less time than it’ll take me to pore through tutorials to find one that makes sense to me. I’ve gone through all the lessons/exercises in the Codecademy module and I just don’t understand it.

I’m so frustrated. I’ve lost several days of study because of this. Contrary to what you might all be thinking I’m not a total idiot but I’m really having problems understanding this and I just want someone to tell me ‘This is what to do’.

#9

We’ve all been in that place of a rut at some point or another (and continue being there in many cases), nobody is questioning your intelligence…

It’s just normal in these forums to tend towards “process” answers rather than immediate ones.

In terms of doing, that’s why I referenced that link. You can play with it interactively and even replicate it locally on your computer:

For example with inspect element you can look at the search bar and where it’s written as a form:

Screen Shot 2021-01-28 at 1.29.38 PM
Screen Shot 2021-01-28 at 1.29.38 PM1217×578 106 KB

And interacting with the search bar you get what you asked for, a passed value:
Screen Shot 2021-01-28 at 1.32.55 PM

That link is from the aforementioned book, but that’s on chapter 6. It walks you through building the thing step by step. But the source code for the chapters you can get here: GitHub - MoonHighway/learning-react: The code samples for Learning React by Alex Banks and Eve Porcello, published by O'Reilly Media. So you could potentially work it out that way.

Please understand that there’s a fine balance between being pedantic to people and too obscure. Pointing these things out might offend someone for seeming obvious, whereas others may want the suggestion in a particular direction.

I want to re-emphasize that what’s happening to you happens to all learners of programming. We get stuck, we lose weeks on a subject. But that’s ok. Enough of these experiences can help us find the tools/techniques for chipping away better next time. I mean this with all respect, no snark.

As another suggestion, in breaking that link down I would draw a diagram of the file structure and highlight what props are passed on to what components. That’ll help you track the prop that deals with the search bar value.

1 Like
#10

I totally understand that and I think it’s a good way to learn. It’s how I’ve got myself unstuck on a lot of occasions whilst doing this course. However, I would really appreciate an immediate solution so I can get back to work before I throw my laptop out of the window and take up gardening instead. Seriously, a million pounds to the person who gets me unstuck.

Code I posted earlier summed up:

renders a search bar(!) which eventually would return a search result of a city that the user has inputted when they hit Submit. The class in SearchBar has the constructor, the render method and two other methods, handling the input to the text field and the click of the Submit button.

will eventually render a weather forecast for that city. It currently renders an error.

is the top layer which so far only contains a single instance of the above two components.

How do I get the user input from the SearchBar component to the Weather one and any other components I create?

That’s honestly all I’m asking. Once I’ve done this I’ll always have a working example that I understand the paths and function behind and can refer back to if I get problems in the future.

#11

Unfortunately these aren’t things that can be explained very easily, they require fundamental building blocks and cemented knowledge and any simple answer to your question doesn’t sound like it would help you at the position you’re at.

I’d recommend you go back to the very start of making this app, and every single time you write a bit of code you think about what it is meant to be doing and think about the bigger picture.

I’m definitely not trying to put you off, you’ve got this far so I’m sure you will be able to get through and understand react aswell as you understand the rest of the Web stack! But everyone comes up against something they struggle with eventually, you need to step back and go back to a point in time you were comfortable with everything and rebuild up your knowledge from there.

So for what it is worth my advice would be restart the ravenous app, read every single hint, don’t write a single line of code you don’t understand and keep asking questions in the forums and questioning your own understanding. It will be a lot of work but you’ll definitely be a master of react by the end of it :blush:

2 Likes
#12

For the main React work-flow it will be easier to make a static version of the “weather-data” first. Just hard-code it in the React state before implementing the fetch from an API. Store this state in a component that is higher in the hierarchy than the components that will read this data since data gets passed down as props in React (perhaps store in the top App component).
See this for workflow:
https://reactjs.org/docs/thinking-in-react.html

Once you have the static version working, make a function in the same component as the state which updates the state (perhaps the App component). In Ravenous the state is stored in the businesses array in App. And the searchYelp function in App updates the businesses array (using an API, the fetch logic being imported from Yelp.js).

If you find classes/constructors and so on confusing, you are not alone. With React hooks and functional components React has got a bit easier so I recommend checking out useState and useEffect hooks at some point if not familiar already…

Also recommend the tutorials from the React official documentation

1 Like