React

Problems, solutions and everything in between.
Latest entries

React deconstruct a single prop whilst maintaining the other props

You may or may not know you can deconstruct props. In the shortest possible explanation, deconstructing allows you to extract information from an element and saving that in its own variable. For example, the below code would give me two variables "name" and "location" const Person = { name: 'Chris', location: 'UK'} const { name, location } = Person; Moving this on, you can deconstruct from within components. const functionalComponent = (Person) => {} // becomes const functionalComponent =…

React Not Compiling Spread/Rest Operator

If you're facing the error "Module build failed: SyntaxError: Unexpected token" when trying to use the spread operator. Chance are you're missing the Object rest spread transform which can be found here: https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/. Run: npm install --save-dev babel-plugin-transform-object-rest-spread OR yarn add babel-plugin-transform-object-rest-spread Then if you don't already have a .babelrc file, create one with the following. { "plugins":…

JavaScript Operators To Improve Your Daily Productivity

Contents Spread Operator Spread Operator Expands an array into it's individual elements const food = ['pizza', 'chips', 'nuggets'] console.log(...food) // returns: pizza chips nuggets As use case would be with React and passing down the props, you may not necessary want to pass down everything individually so you could do something like return ( )

Show the whole current ‘state’ with React - JSON.Stringify

{JSON.stringify(this.state, null, 4)} Read more on JSON.stringify here { "success": false, "message": {}, "firstname": "", "surname": "", "tel": "", "email": "", "contact_message": "" }

[SOLVED]: Super expression must either be null or a function ReactJS

I had this problem when using a lower case "c" on component... Class Hello extends React.Component If this doesn't solve your issue, try updating your React version.

uncaught reference error require is not defined

Short answer here, make sure you call the correct file on index.html. I do everything in main.js and then compile into main.min.js, I was calling main.js when I should have been calling main.min.js This solved the problem when requiring .jsx files into a single js file. Hope this saves you a little bit of time. ps - I tried everything solving this, there may have been another solution but I also had to make sure I had the correct dependencies installed

Webpack no output file: How to debug and save a load of time

Webpack for some reason or another wouldn't render to the output file and I was convinced it was the "output" line on my webpack.config file, however after changing that I come to the realisation I was wasting my time. Simply running this command will save you a hell of a lot of time. webpack --display-error-details This told me exactly where my problem was and the fact I was trying to import a .scss file from a relative path rather than an absolute path was the gotcha in the end and it had…

Package.json default template

{ "name": "Project name", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "dependencies": { "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.16.0", "react": "^15.3.2", "react-cookie": "^0.4.8", "react-dom": "^15.3.2", "react-modal": "^1.5.2", "webpack": "^1.13.2", "whatwg-fetch": "^2.0.1" }, "author": "", "license": "ISC" }

Webpack.config.js default template

let webpack = require('webpack'); module.exports = { context: __dirname, entry: "./main.js", watch:true, output: { path: __dirname + "/js", filename: "main.min.js" }, module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react'] } } ] }, plugins: [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), new webpack.DefinePlugin({…