React

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 =…

Posted one year ago

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":…

Posted 2 years ago

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 ( )

Posted 2 years ago

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": "" }

Posted 3 years ago

[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.

Posted 3 years ago

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

Posted 4 years ago

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…

Posted 4 years ago

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" }

Posted 4 years ago

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({…

Posted 4 years ago

React deconstruct a single prop whilst maintaining the other props

React Not Compiling Spread/Rest Operator

JavaScript Operators To Improve Your Daily Productivity

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

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

uncaught reference error require is not defined

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

Package.json default template

Webpack.config.js default template

Categories

HTAccess

SSH Commands

vBulletin

Expression Engine

PHP

Git commands

Linux

SEO

Google

CSS

marketing

Javascript

MySql

help

Mongodb

Smarty

Mac

News

Server

Wordpress

Elastic