DEV Community: Krisztian Kecskes

Web Components with Redux

Krisztian Kecskes — Sat, 19 Jan 2019 10:04:28 +0000

So, it's been a while since I wrote post. I spent my time with work and collect experience with new things, like native Web Components. I created an experimental project with them, that I would like to show you now.

You can find the project's source code on my GitHub profile.

🔎 Short description

My destination was clear:

Create a native web component
Use it multiple times in an HTML file
I wanted to use same component, but different values to show inside them
Connect them to a common store with the help of Redux

I wanted to use ES6 features, so I decided to use Webpack and Babel. Webpack took care about bundling process and development server function with webpack-dev-server.

The rest is very light. I created a counter component, that has a display to show a number, and under that there is a button that can help you to increase the number. I inserted three times counter component to the HTML DOM and connected them to a common store.

The Redux store is prepared to get three counter value with ID-s, so I can handle every counter component's value individually.

The main App module gets every counter value on the page and make a cumulate value with them and show it above the counters.

🎉 That's all!

You can give a try the project, feel free to clone it!🙂

Deploy Next.js project to Netlify

Krisztian Kecskes — Fri, 21 Dec 2018 20:26:21 +0000

I have just finished my own test with Netlify. It is a static page provider with Git deploy integration opportunity (GitHub, GitLab, Bitbucket) . Netlify has got very good performance, it provides https sertification and we can use our own domain with the projects. So, we have got everything that we need for a starter project. Here comes a brief guide!

Our next excellent tool is Next.js! It provides server-side rendering application development tool for us. Next.js can export our full application by pages. So it can behave as a server-side rendered application, but without Node.js server.

🔥 Important note: Netlify can serve static page only! So if you have multiple route in your application then you need to export every of them! It is not a Next.js guide article, but I would give you a hint, how to do that:

You only need to add three additional script to you package.json:

{
  "scripts": {
    "build: "next build",
    "export": "next export",
    "deploy": "npm run build && npm run export"
  }
}
```



After the *"npm run export"* command, Next.js will take care about the rest. It will generate every of your page and subpage as a static application.

**🤔 Ok, what's next?!**

Deploy your project to GitHub/GitLab or Bitbucket. After that, you can create your Netlify project and connect it to your repository.

![Create Netlify Project](https://thepracticaldev.s3.amazonaws.com/i/85n9jgo9qg0gtpblcpwc.jpg)

As you can see, you can select the branch, where you would like to watch the changes. Netlify will copy every new version after commits, and then you can give a command which will take care about the build process. In our case, we can use *"npm run deploy"* as the build command.

You have a publish directory option in the form, where you can give the generated build's folder name. In Next.js case, we need to use *"out"*, because Next will export everything into that folder.

That's all! After these settings, Netlify will take care about hosting and build process on your selected branch.

👨‍💻 Happy coding!

React Router - How to pass History object to a component

Krisztian Kecskes — Fri, 14 Dec 2018 21:24:09 +0000

I was in a middle of a project, and I didn't used React for a while. I had to solve the situation: I had got a component, which was embeded deeply in a Route component (this Route was under a Browser Router component). I needed to use history object from the Router history. I started to remember my bad adventures with old React Router and circumstantial history manipulation.

So, I was in a bad mood, when I opened the official documentation. It was a big surprise when I could solve my task in 3 minutes.

There is a magical higher-order component, that name is withRouter. It takes place in the react-router-dom package also. With its help, you can pass the whole history object to your component as properties. They contains several useful data about routing.

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';

class PassToMeMyRouterHistory extends PureComponent {

  redirectToHome = () => {
   const { history } = this.props;
   if(history) history.push('/home');
  }

  render() {
    const { history } = this.props;

    return(
      (history)
      ?
        <div onClick={this.redirectToHome}>You can go to Home 🥳</div>
      :
        <div>Oh, we did not get pathname! 🤔</div>
    );
  }

}

export default withRouter(PassToMeMyRouterHistory);

```


As you can see above, after we let the *withRouter* component to do its job, we can easily reach the necessary data and functions in connection with history. The history object has several property, you can check it in the [documentation](https://reacttraining.com/react-router/web/api/history).

Ps.: You need to handle the re-render logic in your component when you need this action, in case of location change. *withRouter* gives you the props but doesn't subscribe for the changes!

React - ES6 tricks in Classes

Krisztian Kecskes — Thu, 13 Dec 2018 15:37:25 +0000

I read several entries with example codes in connection with React. For example, I'd just read a short article about Stateful and Stateless components with React. I saw a lot of "old way approaching" solution, so I would like to share with you a trick about the class based components and their state. You can use and try them with Create React App now!

The constructor things

You don't need to define constructor in a class based component just because of function bindings.

🌙 Old way:

constructor(props) {
  super(props);
  this.state = {
    value: ""
  };
  this.handleChange = this.handleChange.bind(this);
}
```



**🌞New way:**



````javascript
class Test extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
     value: ""
    };
  }

  const handleChange = () => {
    // Handle change...
  }

  render() {
   return(
    <input value={this.state.value} onChange={this.handleChange} />
   );
  }

}
```
{% endraw %}


And this is not the end! The local state can be defined on the class level also:
{% raw %}


````javascript
class Test extends PureComponent {

  state = {
    value: ""
  }

  const handleChange = () => {
    // Here comes the change things
  }

  render() {
   return(
    <input value={this.state.value} onChange={this.handleChange} />
   );
  }

}
```



With this solution, you don't need to use constructor and you don't need to bind functions with their name in it. It is question of taste, I know, but I think we can write clear and more readable code this way.