Skip to content

Instantly share code, notes, and snippets.

View HenriqueLimas's full-sized avatar

Henrique Limas HenriqueLimas

View GitHub Profile

Bash-vim-regex

UNIX

its an operating system in 60s.

youtube.com/watch?v=tc4ROCJYbm0

UNIX was orignially built for large mainframe computers that many people would use at the same time

organization

Universal Rendering

JS apps are not great for slow connections. It sends complete markups.

Don't use babel node in production

Now we need to pay attention to not call Dom and consider it.

Code splitting

publicPath is just to webpack knows where to search other bundles.

'use strict'
const compose = (...fns) => x => fns.reduce((acc, curr) => curr(acc), x)
const double = x => x * 2
const inc = x => x + 1
const doubleAndInc = compose(double, inc)
const Indentity = value => ({
'use strict'
const cluster = require('cluster')
const Cluster = cluster => {
return {
map (fn) {
return Cluster(fn(cluster))
},
valueOf() {

Redux overview

Start using React and use Redux only when you need. Its not so difficult to refact to redux. It can complicate your app. Its difficult to understand. Central repository for all your state.

Its hard to components comunicate with each other, so redux comes to help.

It make a hard dependency on it.

Redux overkill things.

Code mode

Tool to transform your currently code to a new one that has braking change.

.createClass will be deprecated

React lifecycle methods

getInitialState/constructor one of the first methods called by React.

componentWillMount: before the DOM. Almost never used. That it call inside node js

Snapshot testing with JEST

Jest encapsulate Jasmine. Suggestion is put yours files in the same folder as the original file.

react-test-renderer library to use with snapshot tests.

Shallow Testing with Enzyme

Shallow its good to test only the parent component and not the child components. That makes easy to find where actually the error is. You should use enzyme to test React apps.

Testing the Number of ShowCards

Creating the Search Page Route

Try to never use HashRouter. On webpack use the property historyApiFallback: true and use BrowserRouter instead of HashRouter.

Loading JSON files

We need to add a loader on Webpack to say how it gonna manipulate json.

Iterating through data

Babel configuration

Babel takes ES6 to ES5. Its a platform to transform a type of code to another type of code.

{
  "presets": [
    "react",
    ["es2015", {"modules": false, "loose": true}]
  ]
}

Yarn

Replaces npm for doing install.

npm install --save react

vs