Category Archives: ReactJS

Including an Externally Hosted Script in ReactJs

Hi everyone,

Just a quick example of how to include an externally hosted js file in a reactjs app. In index.html add your script tag as you would in a normal app:

  <head>
    <script src="https://js.prelive.promisepay.com/PromisePay.js " type="text/javascript"></script>
  </head>

Then in the file you plan to use the library you can add a const and reference it normally:

const promisepay = window.promisepay;

Thanks to this link for the info: https://stackoverflow.com/a/44877953/522859

Allow Number and String for PropTypes – ReactJS

Hi everyone,

A quick post on how to allow a string or number when defining PropTypes:

static propTypes = {
        numberField: PropTypes.number.isRequired,
        stringField: PropTypes.number.isRequired,
        mixedField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
    }

Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/41808543/522859

Overriding Button Styles and Hover Effects – Material UI

Hi everyone,

Just a quick post on how to override the background color and hover effects for buttons in material ui:

Define your class as follows:

 
const styles = theme => ({
    ...
    greenButton: {
        backgroundColor: green[500],
        color: '#FFF',
        '&:hover': {
            backgroundColor: green[400],
            color: '#FFF'
        }
    }

Then just reference it as you normally would:

 
const styles = theme => ({
 
const { classes } = this.props;
 
<Button size="small" className={classes.greenButton} variant="raised">
      <AddShoppingCartIcon />
</Button>

Multiple Instances of Component Firing Incorrect onChange – ReactJS

Hi everyone,

I ran into a bit of an issue today while trying to render multiple instances of a component on a single page. Each component had a file input that was bound with an onChange event. When triggered the onChange function referenced the first component placed on the page no matter which instance was clicked.

The issue ended up being that the id of the input fields coincidentally overlapped. This meant that there were multiple instances of the field on the page with the same id value. Ensuring that each one was unique resolved the issue.

Took a fair while to narrow this one down so hopefully it’ll be able to help someone else!

Thanks,
Chris

Avoiding Wrapper Divs in ReactJs

Hi everyone,

Just a quick post on how you can avoid wrapper divs in ReactJs. It’s particularly useful when populating tables or creating parts of a larger component. Instead of the following:

return (
  <div>
    <td>Frogs</td>
    <td>Turtles</td>
  </div>
);

You can use fragments:

import React, { Fragment } from 'react'
...
return (
  <Fragment>
    <td>Frogs</td>
    <td>Turtles</td>
  </Fragment>
);

The fragment won’t polute the dom and mean that you don’t need to add any additional styling. Check out these links for more info:
https://reactjs.org/docs/fragments.html
https://stackoverflow.com/a/49375945/522859
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

Where to Import Colors from in MaterialUI – ReactJS

Hey everyone,

I ran into the following error while trying to import colors in MaterialUI:

Module not found: Can’t resolve ‘material-ui/styles/colors’

It turns out that the path to colors changed in V1, so a lot of guides aren’t quite right. All you need to do is change it to the following:

/* import {grey, amber} from ‘material-ui/styles/colors’ Original */
import {grey, amber} from ‘material-ui/colors’ /* New */

Thanks to this Github post for the answer: https://github.com/mui-org/material-ui/issues/6446

Full Page Layout Example for Material UI – ReactJS

Hi everyone,

I’ve spent the last couple of days looking into MaterialUI. It seems really good however there are very few examples of a layout wireframe. After digging through Github I came across the following CodeSandbox:

There are a number of other themes and templates available (such as the amazing Material Dashboard) but they are all very in depth and not really suitable for a quick prototype or mock.

Thanks to Luke Peavey for posting the answer on StackOverflow. It definitely deserves a lot more views: https://stackoverflow.com/a/50312721/522859

Hopefully, this will be able to save someone else a bit of time!

Cheers,
Chris

Pass a Component as a Child Prop and Render it – ReactJs

Hi everyone,

A quick post on how to pass a component as a prop and then render it as a child.

const ChildComponent = () => <div>Child Component</div>;
 
const MainComponent = (props) => <div><div>Main component. Child appears below</div>{props.content}</div>;
 
class App extends React.Component {
 
  render () {                                        
    return (
      <div>          
          <MainComponent content={<ChildComponent />} />          
      </div>
    );
  }
}

An alternative to all of this that I wasn’t aware of is to to use “children”:

See the Pen ozqNOV by Dan Abramov (@gaearon) on CodePen.

Thanks to the following stackoverflow post for the info: https://stackoverflow.com/a/41499555/522859

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:\Users\source\repos\frontend\src

Hi everyone,

I was looking into asynchronous requests with redux tonight and hit the following error:

Module not found: Can’t resolve ‘babel-polyfill’ in ‘C:\Users\source\repos\frontend\src

This is used to provide a promise polyfill for a fetch package mentioned in the tutorial. In order to fix it, just run the following:

npm install babel-polyfill

Thanks to the following post for the solution: https://stackoverflow.com/a/33568284/522859

Module not found: Can’t resolve ‘redux’ in ‘C:\Users\FrontEndSrc\frontend\node_modules\react-redux\es\connect’

Hi everyone,

Another quick one. I’d installed react-redux but was running into the following error:

Failed to compile.

./node_modules/react-redux/es/connect/mapDispatchToProps.js
Module not found: Can’t resolve ‘redux’ in ‘C:\Users\source\repos\FrontEndSrc\frontend\node_modules\react-redux\es\connect’

Fairly easy fix, you need react as well as react-redux:

npm install –save redux

Once that’s done, it should all be working!

Cheers,
Chris