A sustainable minimal react-app framework composition | Ready for production

Photo by Polina Tankilevitch from Pexels

Management summary

Motivation

The frameworks I’ve chosen

Typescript

var multiply = (val1,val2) => {
return val1 * val2;
}
var result = multiply(2,4);
console.log(result);
var invalid = multiply('2','asdf');
console.log(invalid);
const multiply = (val1:number,val2:number) => {
return val1 * val2;
}
let x:number = myFunction(2,4);
console.log(result);
let invalid:number = multiply('2','asdf');
console.log(invalid);

React hooks

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
setCount(c) {
this.setState({
count: c
});
}
render() {
return (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setCount(this.state.count + 1)}>Click me</button>
</div>
);
}
};
ReactDOM.render(<Counter />,document.getElementById('root'));
const Counter = () => {
[count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
ReactDOM.render(<Counter />,document.getElementById('root'));

Redux & Redux-Toolkit & Redux-Thunk

const tags = useSelector((state: RootState) => state.metadata.tags)

Immer

var o = JSON.parse(JSON.stringify(this.state.entry));
o.foo.bar = 'my updated value';
this.setState({ entry: o });
//this is creating an object "entry" in my react state
const [entry, setEntry] = useImmer(props.entry);
const setFooBar = (newVal) => {
setEntry(draft => {
draft.foo.bar = newVal;
});
};

React-I18Next

import i18next from 'i18next';
...
return (
<div>{i18next.t('mylocalizedProperty')}</div>
);

Webpack

const appConfig = {
entry: './src/index.tsx',
externals: {
// Use external version of React
"react": "React",
"react-dom": "ReactDOM"
},
plugins: [
new webpack.IgnorePlugin(/react/,/react-dom/),
new copyPlugin({
patterns: [{
from: './locales/**/*.json',
to: './'
}]
})
],
module: {
rules: [
{
test: /\.(ts|js)x?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'my.bundle.js',
path: path.resolve(__dirname, 'dist/app'),
},
devtool: "source-map"
};

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store