Category: Articles

Redux Cycle

Action Creator (User)-> Action(Form) -> dispatch(Form handler) -> Reducers(Departments) -> State(Compiled shared department data) Analogy, Insurance Company: policy: Customer holds a policy, if bad stuff happens to them then we pay them claim: Customer had something bad happen to them, we need to pay them. Customer signs up for a Policy -> Form -> Form …

Custom Hooks

Custom hooks are a great way to avoid repeating yourself while writing code. Custom hooks will always use a primitive React hook. Its not for JSX. Each hook should have only one purpose, such as data-fetching from a specific api. Steps to take when creating reusable hooks Identify each line of code related to some …

Hooks in React

Hooks help writing reusable code. useState – Function that lets you use state in a functional component. inside your functional component, deconstruct an array and pass in 2 values, first value will be a getter function and second value will be a setter, then call the useState function and pass in the initial value as …

React Lifecycle

constructor One-time setup, assignments.Do not do data-loading inside the constructor, instead do it in componentDidMount. render Return JSX, nothing else! componentDidMount Place for data-loading, api requests etc. componentDidUpdate Place to do more data-loading when state/props change. Render-method will be called just before this method. componentWillUnmount Place for cleanup       Rarely used lifecycle methods: …

Functional Components vs Class Components in React

Old version of React: Functional components – produce JSX to show content Class components – produce JSX to show content, use the lifecycle method system, use the state system New version of React: Functional components can: Express things at a certain time with Hooks instead of the lifecycle method system class components are using. use …

JSX

Adding custom styling to an element uses different syntax, Wrap it in {{}}, remove the dash in backgroundcolor and capitalize the 2nd word instead, remove double quotes, remove ; and add a comma if its multiple styles. put the style values in single quotes Adding a class to an element uses different syntax, className instead …

Add a custom event that triggers a goal in GA with GTM

1. Make sure that GTM is fully configured and activated on your site 2. Push an event to the dataLayer when you want it to happen… for example inside an eventlistener… 3. We will call this event “myevent” and the variable for the event “myeventResult”. These should be changed to something descriptive depending on what …

Add Google Analytics to your emails!

Set up email tracking with Google Analytics! Then create a custom metric by going to your admin settings, chosing your property then Custom Metrics. Add the following settings 4. Go to https://ga-dev-tools.appspot.com/hit-builder/ and add the following parameters, change the value of “tid” to your Google Analytics Tracking ID. Then copy the generated parameter string. Useful examples can be …

How to code emails

Coding emails is one of the most annoying things you can do in HTML. The reason is that email clients preprocess the code in the html before rendering it and showing it to the user. It started as a security feature but a lot of email clients also targets CSS and the html structure which …