reactjs

Using `”homepage”` in package.json, without messing up paths for localhost

by

Docs for create-react-app explains how to serve same build from different relative paths. If you put homepage as “homepage”: “.”, assets will be served relative to index.html. You will then be able to move your app from http://mywebsite.example to http://mywebsite.example/relativepath or even http://mywebsite.example/relative/path without having to rebuild it. For development purposes, serving using yarn start … Read more

How to import and export components using React + ES6 + webpack?

by

Try defaulting the exports in your components: import React from ‘react’; import Navbar from ‘react-bootstrap/lib/Navbar’; export default class MyNavbar extends React.Component { render(){ return ( <Navbar className=”navbar-dark” fluid> … </Navbar> ); } } by using default you express that’s going to be member in that module which would be imported if no specific member name … Read more

How to create unique keys for React elements?

by

There are many ways in which you can create unique keys, the simplest method is to use the index when iterating arrays. Example var lists = this.state.lists.map(function(list, index) { return( <div key={index}> <div key={list.name} id={list.name}> <h2 key={“header”+list.name}>{list.name}</h2> <ListForm update={lst.updateSaved} name={list.name}/> </div> </div> ) }); Wherever you’re lopping over data, here this.state.lists.map, you can pass second … Read more

When should I be using React.cloneElement vs this.props.children?

by

props.children isn’t the actual children; It is the descriptor of the children. So you don’t have actually anything to change; you can’t change any props, or edit any functionality; you can only read from it. If you need to make any modifications you have to create new elements using React.CloneElement. https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components An example: main render … Read more

Jest test fails : TypeError: window.matchMedia is not a function

by

The Jest documentation now has an “official” workaround: Object.defineProperty(window, ‘matchMedia’, { writable: true, value: jest.fn().mockImplementation(query => ({ matches: false, media: query, onchange: null, addListener: jest.fn(), // Deprecated removeListener: jest.fn(), // Deprecated addEventListener: jest.fn(), removeEventListener: jest.fn(), dispatchEvent: jest.fn(), })), }); Mocking methods which are not implemented in JSDOM

How to set component default props on React component

by

You forgot to close the Class bracket. class AddAddressComponent extends React.Component { render() { let {provinceList,cityList} = this.props if(cityList === undefined || provinceList === undefined){ console.log(‘undefined props’) } else { console.log(‘defined props’) } return ( <div>rendered</div> ) } } AddAddressComponent.contextTypes = { router: React.PropTypes.object.isRequired }; AddAddressComponent.defaultProps = { cityList: [], provinceList: [], }; AddAddressComponent.propTypes = … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)