I wish I knew these before diving into React – OpsGenie Engineering

  • By default, setState triggers a re-renderThe default behavior of React is to re-render on every state change, and most of the time it is okay to rely on this.
  • However, re-rendering unnecessarily wastes cycles which is not a good practice.Each component has a method called shouldComponentUpdate and it is called everytime you change state or pass new props from the parent component.
  • We can simply divide lifecycle into three parts:Mounting: an instance of the component is being created and inserted into the DOM.Updating: component is being re-rendered, can be caused by changes of props or state.Unmounting: component is being removed from the DOM.It is very important to understand how these methods work….
  • Compare this.props with nextProps and if there is a significant change, act on it.Two important notes here:React may call componentWillReceiveProps even if the props have not changed, so comparing this.props and nextProps is is invoked before a mounted component receives new props, this means React doesn’t call componentWillReceiveProps with initial…
  • Use React Developer ToolsReact Developer Tools lets you inspect the React component hierarchy, components’ props and state.

At OpsGenie, we had a deep dive into React for our Badges project. I learned many new things & made many mistakes. These are the things that really helped me.
Continue reading “I wish I knew these before diving into React – OpsGenie Engineering”

React Router Tutorial Example From Scratch

  • React Router Tutorial Example From Scratch is today’s main topic.
  • Routing to front end application is a very important concept and today I am going to show you how to use react router v4 in our React.js application.
  • Create one folder inside root directory called app and in that make one file called main.js – – The further step, make one file inside root called webpack.config.js and copy the following code into it.
  • There are two types of router object.
  • Every router creates history object to keep track of the current location of the page.

React Router Tutorial Example From Scratch. We are using React Router version 4. react-router v4. A basic example of react-router in React.js project.
Continue reading “React Router Tutorial Example From Scratch”

Building a personal website from start to finish – YUDIAN ZHU – Medium

  • Recently, I built a personal website and would like to share the steps here for reference.These are the steps I take:1.
  • Visual Tools like CyberDuck and FileZilla helps you to drag files directly to the server which is quite convenient.
  • After we finish it we can polish it again and again.The following are sketches I draw for website design.
  • I chose create-react-app to construct.Following the guide of create-react-app and split the different parts of my website.Filling in contentsPut up the introduction of your wbesite and show the viewer what this website is all aboutDeploy to serverrun the commandnpm run buildupload the build files to the server.
  • The server will look for the index file and show it on the website.Polish the websiteConsider that your website is not perfect enough?

Web beginners are usually quite confused where to start to build a website. Recently, I built a personal website and would like to share the steps here for reference. These are the steps I take:
1…
Continue reading “Building a personal website from start to finish – YUDIAN ZHU – Medium”

Redux Devtools for Dummies – tyler clark – Medium

Redux Devtools for Dummies  #react #development #testing #redux #javascript #reactjs

  • In my opinion, this is the most robust and easiest to set up.npm install –save redux-devtools-extensionimport { composeWithDevTools } from ‘redux-devtools-extension’; into the store file.Finally compose your store with the imported module:import { composeWithDevTools } from store = createStore(reducer, composeWithDevTools( // other store enhancers if any));I recommend using this option over the others because it helps avoid issues with isomorphic applications.
  • Check out the additional features you can add and remove to the console hereHere is how one would add in those customized features:import { composeWithDevTools } from composeEnhancers = composeWithDevTools({ // Specify custom devTools options});const store = createStore(reducer, /* preloadedState, */ composeEnhancers( // other store enhancers if any));Also, if you do not have enhancers/middleware in your application, there is a more straight forward approach:import { devToolsEnhancer } from store = createStore(reducer, /* preloadedState, */ devToolsEnhancer( // Specify custom devTools options));Notice that we are using devToolsEnhancer here rather than composerWithDevTools.
  • If you installed everything correctly in your store initialization, it will show you something like this:If there is an error in your set-up, including exceptions thrown from your code, you will see this:Let’s break down whats happening in each section of the dev tools.Left-Side Console ToolsThe left hand column of the dash is showing in real time the actions that are firing on the current page (as defined by the action creator types).
  • The skip will cross out the action and show you your app without that action.Right-Side Console ToolsThe four tabs at the top right are in my opinion the most helpful of the tools.DiffThe right side of the console has multiple options to see the state of the application and the relation of each action to the state.When an action is selected in the left hand side of the console, the Diff option will show only what that individual action changed in the state tree.ActionClicking on the Action tab will show the individual action type and any data it is carrying along to the reducers.In the example above, this action has a type features/FETCH_SUCCESS and also carries data, the requested features to the reducer.
  • Including all of the combined reducers and their corresponding data branches.The Raw tab shows the action creator in a code view.StateThe state tab shows the entire state tree at the time of the action selected in the left hand side of the console.TestBack to the upper tabs, there is a test option.

Do you take one look at the docs and just give up? Did you know that you can completely control the currently running application’s actions/state through these tools? The first step is the easiest to…
Continue reading “Redux Devtools for Dummies – tyler clark – Medium”

React, Reselect and Redux – Dan Parker – Medium

React, Reselect and Redux  #redux #react #reselect #reactjs

  • It gets the state object and returns whatever state.foo.bar is.Now for ReselectReselect is a memoized selector function, composed of selectors, that returns something you want in your component’s props.import { createSelector } from ‘reselect’// selectorconst getBar = (state) = state.foo.bar// reselect functionexport const getBarState = createSelector( [ getBar ], (bar) = bar)I know that syntax looks funny at first, but here’s what happens.
  • Standard set-up, only we have our selector function getBarState(state) rather than state.foo.barWe passed our state into getBarStategetBarState calls getBar with state as the argument.getBar goes into our state object and returns bar.We use that return value in our Reselect function.Reselect handles the memoization.In Redux, whenever an action is called anywhere in the application, all mounted connected components call their mapStateToProps function.
  • all while being properly memoized.In order to properly memoize a selectorFunction for reusability, it can not be written in the same way…and your mapStateToProps must also change if it is to properly memoize.You need to create a new instance of your selector function every time it is needed for proper memoization on multiple components.To do this, change your selectorFunction to be an anonymous function, that returns a selectorFunctionimport { createSelector } from ‘reselect’// I am a selector, I need no special treatment to be properly // memoized across multiple instances// I have am now passing props so I can find a specific barconst getBar = (state, props) = { const id = props.id const barById = state.foo.bar.find((item,i) = item.id === id) return barById}// This no longer will work if it is needed in multiple places//export const getBarState = createSelector(// [ getBar ],// (bar) = bar//)// This is proper if it is needed in multiple instancesexport const makeGetBarState = () = createSelector( [ getBar ], (bar) = bar)Now when I call makeGetBarState I get a new instance of a createSelector function.To use this in my component I have to change things there as well.import React from ‘react’import { connect } from ‘react-redux’import { makeGetBarState } from ‘.
  • /selectors’// remember, mapStateToProps can have the component’s// props as the second argument// but now we need to modify this method to allow for a new// instance of our makeGetBarState function, which returns a // memoized selector const makeMapStateToProps = () = { const getBarState = makeGetBarState() const mapStateToProps = (state, props) = { return { bar: getBarState(state, props) } } return mapStateToProps}class Thing extends React.Component { …}export default need to change the standard mapStateToProps to be an anonymous function, that returns a mapStateToProps function…hence makeMapStateToPropsIn the makeMapStateToProps, I create a new instance of my selector function with the const getBarState = makeGetBarState()Now getBarState is a selector function, independent of any other selector function, and it will properly memoize across multiple mounted connected components.Clean it upWe all like short and sweet…right?
  • /selectors’const makeMapStateToProps = () = { const getBarState = makeGetBarState() return (state, props) = getBarState(state, props)}class Thing extends React.Component { …}export default has some cool features.

React is awesome. Redux is awesome, Reselect is awesome. It can be tricky to get all three to play nice together. I will try and explain, in detail, how they work together. If you have no knowledge…
Continue reading “React, Reselect and Redux – Dan Parker – Medium”

FCC Speedrun — First steps into coding – Darko Tasevski – Medium

FCC Speedrun — First steps into coding  #react #javascript #reactjs

  • FCC Speedrun — First steps into codingI signed up for speedrun, despite of having a ton of courses and books, I planned to finish this month, to go through.
  • But I think that best kind of learning is learning from experience, so I will give it a go and do my best, which at this moment, sadly, is not that much.My plans for speedrun are to do my projects in HTML/CSS/JS with addition of , maybe, React/Redux or Vue.
  • I also will update my Medium page with every step forward in learning something new, and with every project I finish.
  • I hope that this will be an extra productive month and big leap forward my career goals.In addition, I would like to thanks to P1xt, Chance Taken and all those people in cohorts who are an limitless source of energy and motivation!

I signed up for speedrun, despite of having a ton of courses and books, I planned to finish this month, to go through. But I think that best kind of learning is learning from experience, so I will…
Continue reading “FCC Speedrun — First steps into coding – Darko Tasevski – Medium”