<p>Focusing elements with plain Javascript is quite easy. You get the element for example with id and call <code>focus()</code> on it e.g. <code>document.getElementById("myAnchor").focus()</code> and that's it. But how can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript?</p>
<p>The answer is: React Refs!</p>
<p><a href="http://www.youtube.com/watch?v=mqP_qNViGUQ"><img src="http://img.youtube.com/vi/mqP_qNViGUQ/0.jpg" alt="5 Tips for Successful Remote Work"></a></p>
<h2>React Refs</h2>
<p><a href="https://reactjs.org/docs/refs-and-the-dom.html">Refs</a> can be used to access DOM nodes or React components that are rendered in the render method. Refs are created with <code>React.createRef()</code> function. Refs can then be assigned to an element with ref-attribute. Following example shows a component that will focus to the text input when rendered.</p>
<pre><code class="language-jsx">class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focus();
  }

  render() {
    return &#x3C;input ref={this.textInput} />;
  }
}
</code></pre>
<p>So we create the ref in the constructor and assign it for <code>textInput</code> variable. Then in the <code>render()</code> method we render our input and set ref-attribute to equal the <code>textInput</code> variable. To get the input autofocus when the component is rendered, we call <code>focus()</code> on the <code>textInput</code> variable in the <code>componentDidMount()</code> method. Note that in order to access the DOM element of the ref we need to use the ref's <code>current</code> property.</p>
<h2>React &#x3C; 16.3</h2>
<p>The example above uses <code>React.createRef()</code> API for creating refs. It was introduced in React 16.3. If you are using an earlier version of React you should use <a href="https://reactjs.org/docs/refs-and-the-dom.html#callback-refs"><em>callback refs</em></a>.</p>
<p>With callback refs we need to pass a function (instead of ref attribute created by <code>React.createRef()</code>) for the input's ref-attribute. The function receives DOM element as its argument which can be stored and accessed elsewhere. So the <code>AutoFocusTextInput</code> component would look like following with callback refs.</p>
<pre><code class="language-jsx">class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = null;
  }

  componentDidMount() {
    this.textInput.focus();
  }

  render() {
    return &#x3C;input ref={(elem) => (this.textInput = elem)} />;
  }
}
</code></pre>
<p>In the constructor we define <code>textInput</code> variable and set it to <code>null</code>. Then in the <code>render()</code> method we pass a function which assigns the element, given as parameter, for the <code>textInput</code> variable. In the <code>componentDidMount()</code> method we now call <code>focus()</code> directly to the <code>textInput</code> variable since it is now the DOM element.</p>
<h2>Wrapping up</h2>
<p>Focusing inputs with React is a bit different than with plain Javascript. But once you get the hang of it, it's quite straight forward. Depending on the React version in use, you have two options , from which to choose from, for implementing refs.</p>
<p>In case you want to try and play around with refs and focusing (with both ways), <a href="https://codesandbox.io/s/xo7ozwqx9q">here is a codesandbox</a> I created. There you can find two components <code>Refs163</code> and <code>Refs162</code> which implement refs both with <code>React.createRef()</code> and with <em>callback refs</em>.</p>
<p>If you are interested in learning more about React, I recommend you check out <a href="https://amzn.to/31dUD7G">The Road to learn React</a> by Robin Wieruch and <a href="https://amzn.to/2YxTc2g">React Quickly</a> by Azat Mardan. Both of these are great resources for learning React and should be found from any serious React developer's bookshelf.</p>
<p>That's it for now! If you have any questions or comments, be sure to leave them in the comment section!</p>



Focusing elements with plain Javascript is quite easy. You get the element for example with id and call `focus()` on it e.g. `document.getElementById("myAnchor").focus()` and that's it. But how can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript?

The answer is: React Refs!

[![5 Tips for Successful Remote Work](http://img.youtube.com/vi/mqP_qNViGUQ/0.jpg)](http://www.youtube.com/watch?v=mqP_qNViGUQ)

## React Refs

[Refs](https://reactjs.org/docs/refs-and-the-dom.html) can be used to access DOM nodes or React components that are rendered in the render method. Refs are created with `React.createRef()` function. Refs can then be assigned to an element with ref-attribute. Following example shows a component that will focus to the text input when rendered.

```jsx
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focus();
  }

  render() {
    return <input ref={this.textInput} />;
  }
}
```

So we create the ref in the constructor and assign it for `textInput` variable. Then in the `render()` method we render our input and set ref-attribute to equal the `textInput` variable. To get the input autofocus when the component is rendered, we call `focus()` on the `textInput` variable in the `componentDidMount()` method. Note that in order to access the DOM element of the ref we need to use the ref's `current` property.

## React < 16.3

The example above uses `React.createRef()` API for creating refs. It was introduced in React 16.3. If you are using an earlier version of React you should use [_callback refs_](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs).

With callback refs we need to pass a function (instead of ref attribute created by `React.createRef()`) for the input's ref-attribute. The function receives DOM element as its argument which can be stored and accessed elsewhere. So the `AutoFocusTextInput` component would look like following with callback refs.

```jsx
class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = null;
  }

  componentDidMount() {
    this.textInput.focus();
  }

  render() {
    return <input ref={(elem) => (this.textInput = elem)} />;
  }
}
```

In the constructor we define `textInput` variable and set it to `null`. Then in the `render()` method we pass a function which assigns the element, given as parameter, for the `textInput` variable. In the `componentDidMount()` method we now call `focus()` directly to the `textInput` variable since it is now the DOM element.

## Wrapping up

Focusing inputs with React is a bit different than with plain Javascript. But once you get the hang of it, it's quite straight forward. Depending on the React version in use, you have two options , from which to choose from, for implementing refs.

In case you want to try and play around with refs and focusing (with both ways), [here is a codesandbox](https://codesandbox.io/s/xo7ozwqx9q) I created. There you can find two components `Refs163` and `Refs162` which implement refs both with `React.createRef()` and with _callback refs_.

If you are interested in learning more about React, I recommend you check out [The Road to learn React](https://amzn.to/31dUD7G) by Robin Wieruch and [React Quickly](https://amzn.to/2YxTc2g) by Azat Mardan. Both of these are great resources for learning React and should be found from any serious React developer's bookshelf.

That's it for now! If you have any questions or comments, be sure to leave them in the comment section!


How can you focus element in React since you can't get the element by id, class or type, like you would with plain Javascript? The answer is...

How to focus element in React

<p>In Javascript projects it is important to keep your dependencies up to date. Updating dependencies should be done regularly so you don't end up in a situation where you have all your packages several major versions old. So what is the best way to update javascript dependencies? I like to use <code>yarn updgrade-interactive</code>.</p>
<h2>Update Javascript dependencies with yarn upgrade-interactive</h2>
<p><a href="https://yarnpkg.com/">Yarn</a> provides a handy command for updating your packages – <code>yarn upgarde-interactive</code>. It prints all the outdated packages and lets you choose which ones to update. It will respect the version ranges set in your package.json file.</p>
<p><img src="./images/yarn-upgrade-interactive-1024x477.png" alt="yarn upgrade-interactive output"></p>
<p>Running <code>yarn upgrade-interactive</code> does not update your package.json file with the new version number. This is quite logical if you think about it. Since it will respect the version ranges in the package.json file, there is no need to update the version to package.json. Because if <code>yarn install</code> is ran for a fresh install, the newest package for that version range is installed = same version that <code>yarn upgrade-interactive</code> installs.</p>
<h2>Using --latest flag</h2>
<p>If you wish to install the latest version that is found from the npm registry, you can achieve this by using <code>--latest</code> flag with <code>yarn upgrade-interactive</code>. It will make yarn ignore the version ranges in package.json file and install the latest version of given package. This will also update package.json file with information of the new versions of the updated packages.</p>



In Javascript projects it is important to keep your dependencies up to date. Updating dependencies should be done regularly so you don't end up in a situation where you have all your packages several major versions old. So what is the best way to update javascript dependencies? I like to use `yarn updgrade-interactive`.

## Update Javascript dependencies with yarn upgrade-interactive

[Yarn](https://yarnpkg.com/) provides a handy command for updating your packages – `yarn upgarde-interactive`. It prints all the outdated packages and lets you choose which ones to update. It will respect the version ranges set in your package.json file.

![yarn upgrade-interactive output](/blog-posts/best-way-to-update-javascript-dependencies/images/yarn-upgrade-interactive-1024x477.png)

Running `yarn upgrade-interactive` does not update your package.json file with the new version number. This is quite logical if you think about it. Since it will respect the version ranges in the package.json file, there is no need to update the version to package.json. Because if `yarn install` is ran for a fresh install, the newest package for that version range is installed = same version that `yarn upgrade-interactive` installs.

## Using --latest flag

If you wish to install the latest version that is found from the npm registry, you can achieve this by using `--latest` flag with `yarn upgrade-interactive`. It will make yarn ignore the version ranges in package.json file and install the latest version of given package. This will also update package.json file with information of the new versions of the updated packages.


How to update javascript dependencies in package.json? The easiest way to do it is...

Best way to update Javascript dependencies

<p>I attended GraphQL Finland which was held little over a week ago (Thursday &#x26; Friday 18-19.10.2018) in Helsinki at Paasitorni. The first day was for workshops and the second day for the actual conference. So the structure was similar for <a href="/blog/react-finland-2018/">React Finland</a> with the difference that React Finland had two days of talks instead of one.</p>
<p>At Thursday, which was the workshop day, I participated <a href="https://www.freiksenet.com/">Mikhail Novikov</a>'s "Building a GraphQL API with node.js" workshop. It was very beginner friendly, which was nice because I am quite a noob when it comes to GraphQL. It was a whole day workshop lasting 7-8 hours. After the workshop I felt that I understood the basics of GraphQL pretty well and I was pumped with motivation for the actual conference day of GraphQL Finland.</p>
<p><img src="./images/IMG_9618-copy-e1540891544595-300x265.jpg" alt="GraphQL Finland 2018 - Building a GraphQL API with node.js workshop"></p>
<p>There was also a little informal get together at Thursday evening. It was great to see that many people who came to Helsinki on Thursday, either for workshops or just for the conference, decided to get together for some food and drinks at Thursday evening. We had interesting conversations and it was great to meet some GraphQL people before the actual conference.</p>
<p><img src="./images/graphql-finland-opening-tweet.png" alt="Time to begin the conference!"></p>
<p>Friday was full of talks and quite a few interesting ones. I think the talks were good mix of more advanced stuff and then again something for more of beginners like me. I had few "ahaa" moments and really enjoyed listening the talks and taking it all in.</p>
<p>Overall the conference gave me a good picture of what GraphQL is about and ideas on where and how to use it. I also got a lot of motivation and met great people during the conference, which is always nice!</p>



I attended GraphQL Finland which was held little over a week ago (Thursday & Friday 18-19.10.2018) in Helsinki at Paasitorni. The first day was for workshops and the second day for the actual conference. So the structure was similar for [React Finland](/blog/react-finland-2018/) with the difference that React Finland had two days of talks instead of one.

At Thursday, which was the workshop day, I participated [Mikhail Novikov](https://www.freiksenet.com/)'s "Building a GraphQL API with node.js" workshop. It was very beginner friendly, which was nice because I am quite a noob when it comes to GraphQL. It was a whole day workshop lasting 7-8 hours. After the workshop I felt that I understood the basics of GraphQL pretty well and I was pumped with motivation for the actual conference day of GraphQL Finland.

![GraphQL Finland 2018 - Building a GraphQL API with node.js workshop](/blog-posts/graphql-finland-2018/images/IMG_9618-copy-e1540891544595-300x265.jpg)

There was also a little informal get together at Thursday evening. It was great to see that many people who came to Helsinki on Thursday, either for workshops or just for the conference, decided to get together for some food and drinks at Thursday evening. We had interesting conversations and it was great to meet some GraphQL people before the actual conference.

![Time to begin the conference!](/blog-posts/graphql-finland-2018/images/graphql-finland-opening-tweet.png)

Friday was full of talks and quite a few interesting ones. I think the talks were good mix of more advanced stuff and then again something for more of beginners like me. I had few "ahaa" moments and really enjoyed listening the talks and taking it all in.

Overall the conference gave me a good picture of what GraphQL is about and ideas on where and how to use it. I also got a lot of motivation and met great people during the conference, which is always nice!


GraphQL Finland which was held little over a week ago (Thursday & Friday 18-19.10.2018) in Helsinki at Paasitorni. I think the workshops and talks were...

Best way to update Javascript dependencies

Update Javascript dependencies with yarn upgrade-interactive

Using --latest flag

Subscribe to the newsletter