Forem: Kayut

Which react-redux-thunk boilerplate do you recommend?

Kayut — Tue, 05 Mar 2019 13:49:25 +0000

creact-create-app is a great starting point for creating a react app, but once you need to add react-redux to your project, you have to write a lot of code and repeat this in each project again and again.

I wish there was a create-react-app command that could create an app which includes also the react-redux parts such as a store file, a reducer folder with an index.js in it, action, thunk etc.

Or is there any good boilerplate, which I can use? Which boilerplate do you recommend?

What do you do to minimise writing repetitive code in a react-redux project?

React project on GoDaddy server

Kayut — Mon, 18 Feb 2019 12:14:19 +0000

Just built my very first react app and uploaded it to my GoDaddy server.

These are the uploaded files:

But now, if I try to open my react project in browser, it doesn't work at all and I only see a blank page with the following errors in console:

I double checked, and those css files are existing inside the static folder. Why do they produce 404 error?
Am I missing something? Does a React app need special settings on external server?

React and Axios - How to avoid 404 error

Kayut — Wed, 13 Feb 2019 15:40:43 +0000

I'm trying to write my very first React application.
In a form with two input fields, the user type the name of a country and a city inside the input fields and submit the form.
city and country variables are then passed to the following component, which should send an API-Request to openweatehrmap API and show the results.

import React, { Component } from 'react';
import axios from 'axios';
import Form from './Form/Form';

class Weather extends Component {
  state = {
    country: '',
    city: '',
    currentTemp: '',
    error: undefined,
  }


  getWeather = async (e) => {
    e.preventDefault();
    const URL = 'http://api.openweathermap.org/data/2.5/weather?q='
    const API_KEY = "8b46d478a9...34a69";
    const country = e.target.elements.country.value;
    const city = e.target.elements.city.value;
    try {
      if (country && city) {
        const response = await 
axios.get(`${URL}${city},${country}&appid=${API_KEY}&units=metric`);
        const data = await response;
        console.log(data);
        this.setState({
          country: data.data.sys.country,
          city: data.data.name,
          currentTemp: data.data.main.temp,
          error: '',
        });
      } else {
        this.setState({
          country: undefined,
          city: undefined,
          currentTemp: undefined,
          error: 'Please enter a country and a city name'
        })
      }
    } catch (err) {
      this.setState({ error: err })
    }
  }


  render() {
    let showResult;
    if (this.state.error !== undefined && this.state.country && this.state.city) {
      showResult =
        <ul>
          <li>Location: {this.state.country} {this.state.city}</li>
          <li>Current Temperature: {this.state.currentTemp}° Celsius</li>
        </ul>
    }
    else {
      showResult = <div className="error">
        {this.state.error}
      </div>
    }

    return (
      <div>
        <Form onGetWeather={this.getWeather} />
        {showResult}
      </div>
    );
  }
}

export default Weather;

If you let one or both input fields empty and submit the form, the UI shows an error.
If you fill in both input fields and the country and the city are related (for example UK and London), the UI shows the temperature and some other info.

However,
If you fill in both input fields with just some random text, or if the country and the city are not related to each other, the App crashes as soon as the form is submitted.

I think this is because that the generated API-URL isn't valid any more. The console shows the following error:

https://thepracticaldev.s3.amazonaws.com/i/zo4rzpflnai896424gq4.png

I spent a whole day, but I couldn't find a way to fix it. How can I avoid the app from crashing. How can I validate the generated API-URL? Or any other hint or solution?

Cannot read property 'props' of undefined

Kayut — Fri, 25 Jan 2019 18:31:08 +0000

I get the error: "Cannot read property 'props' of undefined" if I run the following code. Both files are in the same folder. Can you please explain what am I doing wrong?

App.js

import React, { Component } from 'react';
import SeasonDisplay from './SeasonDisplay';

class App extends Component {
  state = {
    lat: null,
    errorMessage: ''
  };

  componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({
          lat: position.coords.latitude
        });
      },
      err => {
        console.log(err);
        this.setState({ errorMessage: err.message });
      }
    );
  }

  render() {
    if (this.state.errorMessage && !this.state.lat) {
      return <div>Error: {this.state.errorMessage}</div>;
    }
    if (!this.state.errorMessage && this.state.lat) {
      // return <div>latitude is {this.state.lat}</div>;
      return <SeasonDisplay lat={this.state.lat} />;
    }
    return <div>Loading...</div>;
  }
}

export default App;

SeasonDisplay.js

import React from 'react';

const SeasonDisplay = props => {
  return <div>{props.lat}</div>;
};

export default SeasonDisplay;

Class definition in React

Kayut — Fri, 18 Jan 2019 22:57:08 +0000

Does a Class component in React need to have a constructor like the following example:

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            count: 0
        }
    }
render() {
  ...
}
}

Or now we can define a Class component without using a constructor, like the following example?:

class App extends React.Component {
        this.state = {
            count: 0
        }
render() {
  ...
}
}

Which one is correct?
Do we still need to write the constructor for a Class component?

Using arrow function to define a method

Kayut — Fri, 18 Jan 2019 16:24:30 +0000

Hi,

I started learning React and right now I'm a bit confused about where to use Arrow-function to define a method and where not to use it.

First let's check object literals

This code works:

const person = {
  points: 23,
  score() {
    return this.points++;
  }
};

person.score(); // Works

But the bellow code doesn't work, because we defined the score() method as an arrow-function:

const person = {
  points: 23,
  score: () => {     // Arrow function
    return this.points++;
  }
};

person.score(); // Doesn't work

Take away: Never define methods in an object literal via arrow-function.
Is the above statement correct?

What about JavaScript classes?

This code works:

class Dog {
    constructor(name, bread) {
        this.name = name;
        this.bread = bread;
    }

    bark() {
        return `Bark Bark! My name is ${this.name}`;
    }
}
const mini = new Dog('Mini', 'Spitz');
mini.bark();

And the bellow code, which uses arrow-function syntax to define the bark() method works too:

class Dog {
  constructor(name, bread) {
    this.name = name;
    this.bread = bread;
    this.bark = () => {     // Arrow function
      return `Bark Bark! My name is ${this.name}`;
    }
  }
}
const mini = new Dog('Mini', 'Spitz');
mini.bark();

Take away: It's fine to define methods in a Class via arrow-function.

Is the above statement correct?

What about React classes (class components)?

It is even recommended to use arrow-functions for defining methods inside React classes as a way to create "auto-binding" methods, e.g. methods that could be used by event handlers but that stayed bound to the class.

Is the above statement correct?

Using arrow functions in object methods

Kayut — Fri, 18 Jan 2019 12:31:40 +0000

Is it possible to use arrow functions to define a method inside a class?

If it's possible. How can I define the method bark() in the bellow example with arrow function?

class Dog {
    constructor(name, bread) {
        this.name = name;
        this.bread = bread;
    }

    bark() {
        return `Bark Bark! My name is ${this.name}`;
    }
}
const mini = new Dog('Mini', 'Spitz');
mini.bark();

I tried this, but it's saying: Uncaught SnytaxError.

bark = () => {
        return `Bark Bark! My name is ${this.name}`;
    }

Error: Your render method should have return statement

Kayut — Thu, 17 Jan 2019 10:58:09 +0000

React complains about the following code with the error: Your render method should have return statement.

Could you please explain what is exactly wrong with my code inside ToDoItems.js?

ToDoItems.js

import React, { Component } from 'react';

class Kir extends Component {
  state = {
    todos: [
      {
        id: 1,
        text: 'Take out the trash',
      },
      {
        id: 2,
        text: 'Grocery shopping',
      },
      {
        id: 3,
        text: 'Clean gecko tank',
      }
    ]
  };

  render() {
    const todoItems = this.state.todos.map((todoItem, index) => {
      return (
        <div key={index}>
          <label>
            <input
              type="checkbox"
              value={todoItem.text}
            />
            {todoItem.text}
          </label>
        </div>
      );
    });
  }
}

export default todoItems;

ToDo.js

import React, { Component } from 'react';
import todoItems from './ToDoItems';

class ToDo extends Component {
  render() {
    return (
      <form>
        {todoItems}
      </form>
    );
  }
}

export default ToDo;

How can I loop over this object in React?

Kayut — Tue, 15 Jan 2019 00:08:32 +0000

Hi,

I'm learning React. In the following component, I import a JS file (data.js), which looks like a JSON file which includes an object.

Inside the return of the TinTinTile class, I use that object to display all data.
In my example bellow, I can only display the first array in the object. But I need a way to loop over the array jsonResponse.characters.

Now my question is:
How can I loop over jsonResponse.characters?

import React, { Component } from 'react';
import jsonResponse from './data';

console.log(jsonResponse);
// const ArrayLength = jsonResponse.characters.length;
// console.log(ArrayLength);

// jsonResponse.characters.foEach(function(i) {
//   console.log(i);
// });

class TinTinTile extends Component {
  state = {};
  render() {
    return (
      <ul id="container" className="cf">
        <li className="list-container">
          <img
            className="image-container"
            src={jsonResponse.characters[0].image_url}
            alt="kir"
          />
          <div className="text-container">
            <h4>Name: {jsonResponse.characters[0].name}</h4>
            <p>Job: {jsonResponse.characters[0].job}</p>
            <p>Age: {jsonResponse.characters[0].details.age}</p>

            <button className="btn">More details ...</button>
          </div>
        </li>
      </ul>
    );
  }
}

export default TinTinTile;