<p>If you are using VS Code to write Javascript or React code, keep reading!</p>
<p>VS Code is my favourite code editor and I use it mostly to write Javascript and React code.</p>
<p>Since I use it a lot, I have picked up few things that make my life easier as a Javascript and React developer. One of them is code snippets!</p>
<p><em>See also: <a href="/blog/top-10-keyboard-shortcuts-for-visual-studio-code/">TOP 10 Keyboard Shortcuts For Visual Studio Code</a></em></p>
<p>Code snippets are great because they save me from having to write same boilerplate code, for example when creating a React component or defining a for loop, over and over again.</p>
<p>You just type in the prefix for the code you want to generate and press enter and voalá, you got your code written instantly!</p>
<p><a href="https://www.youtube.com/watch?v=uuXxomVFbC8">On the video below</a>, I will show you how you can get started on using React and Javascript code snippets with Visual Studio Code in a matter of minutes! I will also share bunch of my favourite and most used snippets that I use every day.</p>
<p><a href="http://www.youtube.com/watch?v=uuXxomVFbC8"><img src="http://img.youtube.com/vi/uuXxomVFbC8/0.jpg" alt="How to write Javascript and React with VS Code FASTER! (using code snippets)
"></a></p>
<p>If you rather read, here is a short summary of the video. (I still recommend you <a href="https://www.youtube.com/watch?v=uuXxomVFbC8">check the video out</a>, and if you like it please do subscribe to <a href="https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw">my Youtube channel</a> also, I would really appreciate it!).</p>
<p>In VS Code, you can create your own snippets. But that is not necessary, because you can also install an extension that provides code snippets you want.</p>
<p>There is a great extension for Javascrit &#x26; React code snippets called <a href="https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets">VS Code ES7 React/Redux/React-Native/JS snippets</a> and you can install it from the extensions tab in your Visual Studio Code.</p>
<p>After installing the extension, you can start using the snippets right away! Snippets can be used with prefixes listed in the extension page. You just type in the prefix in the file you are editing and press <code>enter</code> and the snippet is automatically generated.</p>
<p>Here are couple of my favourite snippets:</p>
<h3>fin</h3>
<pre><code class="language-jsx">for(let itemName in objectName { }
</code></pre>
<h3>nfn</h3>
<pre><code class="language-jsx">const functionName = (params) => {};
</code></pre>
<h3>clg</h3>
<pre><code class="language-jsx">console.log(object);
</code></pre>
<h3>imr</h3>
<pre><code class="language-jsx">import React from "react";
</code></pre>
<h3>imrc</h3>
<pre><code class="language-jsx">import React, { Component } from "react";
</code></pre>
<h3>imrr</h3>
<pre><code class="language-jsx">import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
</code></pre>
<h3>cdm</h3>
<pre><code class="language-jsx">componentDidMount = () => {};
</code></pre>
<h3>cdup</h3>
<pre><code class="language-jsx">componentDidUpdate = (prevProps, prevState) => {};
</code></pre>
<h3>rcc</h3>
<pre><code class="language-jsx">import React, { Component } from "react";

export default class FileName extends Component {
  render() {
    return &#x3C;div>$2&#x3C;/div>;
  }
}
</code></pre>
<h3>rpcp</h3>
<pre><code class="language-jsx">import React, { PureComponent } from "react";
import PropTypes from "prop-types";

export default class FileName extends PureComponent {
  static propTypes = {};

  render() {
    return &#x3C;div>$2&#x3C;/div>;
  }
}
</code></pre>
<h3>rcredux</h3>
<pre><code class="language-jsx">import React, { Component } from "react";
import { connect } from "react-redux";

export class FileName extends Component {
  render() {
    return &#x3C;div>$4&#x3C;/div>;
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);
</code></pre>
<h3>Wrapping up</h3>
<p>Code snippets really save keystrokes and that way also your time and you can code faster and be more efficient.</p>
<p>Are you using code snippets? Comment below your favourite code snippets!</p>
<p>PS. If you are new to React or someone who has just started using it, you should check out my <a href="https://skl.sh/2XAKn7u">React Basics course</a> on Skillshare. You can now get it for free when registering to Skillshare through <a href="https://skl.sh/2XAKn7u">this link</a>.</p>



If you are using VS Code to write Javascript or React code, keep reading!

VS Code is my favourite code editor and I use it mostly to write Javascript and React code.

Since I use it a lot, I have picked up few things that make my life easier as a Javascript and React developer. One of them is code snippets!

_See also: [TOP 10 Keyboard Shortcuts For Visual Studio Code](/blog/top-10-keyboard-shortcuts-for-visual-studio-code/)_

Code snippets are great because they save me from having to write same boilerplate code, for example when creating a React component or defining a for loop, over and over again.

You just type in the prefix for the code you want to generate and press enter and voalá, you got your code written instantly!

[On the video below](https://www.youtube.com/watch?v=uuXxomVFbC8), I will show you how you can get started on using React and Javascript code snippets with Visual Studio Code in a matter of minutes! I will also share bunch of my favourite and most used snippets that I use every day.

[![How to write Javascript and React with VS Code FASTER! (using code snippets)
](http://img.youtube.com/vi/uuXxomVFbC8/0.jpg)](http://www.youtube.com/watch?v=uuXxomVFbC8)

If you rather read, here is a short summary of the video. (I still recommend you [check the video out](https://www.youtube.com/watch?v=uuXxomVFbC8), and if you like it please do subscribe to [my Youtube channel](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw) also, I would really appreciate it!).

In VS Code, you can create your own snippets. But that is not necessary, because you can also install an extension that provides code snippets you want.

There is a great extension for Javascrit & React code snippets called [VS Code ES7 React/Redux/React-Native/JS snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) and you can install it from the extensions tab in your Visual Studio Code.

After installing the extension, you can start using the snippets right away! Snippets can be used with prefixes listed in the extension page. You just type in the prefix in the file you are editing and press `enter` and the snippet is automatically generated.

Here are couple of my favourite snippets:

### fin

```jsx
for(let itemName in objectName { }
```

### nfn

```jsx
const functionName = (params) => {};
```

### clg

```jsx
console.log(object);
```

### imr

```jsx
import React from "react";
```

### imrc

```jsx
import React, { Component } from "react";
```

### imrr

```jsx
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";
```

### cdm

```jsx
componentDidMount = () => {};
```

### cdup

```jsx
componentDidUpdate = (prevProps, prevState) => {};
```

### rcc

```jsx
import React, { Component } from "react";

export default class FileName extends Component {
  render() {
    return <div>$2</div>;
  }
}
```

### rpcp

```jsx
import React, { PureComponent } from "react";
import PropTypes from "prop-types";

export default class FileName extends PureComponent {
  static propTypes = {};

  render() {
    return <div>$2</div>;
  }
}
```

### rcredux

```jsx
import React, { Component } from "react";
import { connect } from "react-redux";

export class FileName extends Component {
  render() {
    return <div>$4</div>;
  }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = {};

export default connect(mapStateToProps, mapDispatchToProps)(FileName);
```

### Wrapping up

Code snippets really save keystrokes and that way also your time and you can code faster and be more efficient.

Are you using code snippets? Comment below your favourite code snippets!

PS. If you are new to React or someone who has just started using it, you should check out my [React Basics course](https://skl.sh/2XAKn7u) on Skillshare. You can now get it for free when registering to Skillshare through [this link](https://skl.sh/2XAKn7u).


If you are using VS Code to write React or Javascript code, you must use this tool! It will save you massive amounts of time and effort.

How to write Javascript and React with VS Code FASTER!

<p>GitHub released a new feature few days ago: GitHub profile readme! You can now add a readme file to be displayed on your GitHub profile page.</p>
<p><em>See also <a href="/blog/if-you-use-git-and-vs-code-read-this/">If you use Git and VS Code – Read This!</a></em></p>
<p>This is a great way to tell more about yourself or for example advertise your blog or YouTube channel. The readme file supports markdown so you can do same things that you can with normal readme files in GitHub.</p>
<p>I uploaded a video to my YouTube channel where I show you how to add a readme file to your own GitHub profile. On the video I also go through couple of very cool and creative ways to use the readme file to boost your GitHub profile. You can watch the video below or clicking <a href="https://www.youtube.com/watch?v=9sxWizm4--w">here</a>.</p>
<p><a href="http://www.youtube.com/watch?v=9sxWizm4--w"><img src="http://img.youtube.com/vi/9sxWizm4--w/0.jpg" alt="5 Tips for Successful Remote Work"></a></p>
<p>If you rather read, here is a short summary on how to add the readme file to your profile (I still strongly recommend checking out <a href="https://www.youtube.com/watch?v=9sxWizm4--w">the video</a> and I would very much appreciate if you also subscribed to <a href="https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw">my YouTube channel</a>, so you stay up to date on more videos I upload).</p>
<p>The way it works is you need to create a new repository and name it the same as your GitHub username is. So for example my GitHub username is tumetus, so I need to create a repository with name tumetus.</p>
<p><img src="./images/Screenshot-2020-07-17-at-2.06.45.png" alt="GitHub profile readme is hinted when creating the repository."></p>
<p>When you create the repository, you see a notification that you are creating a special repository and that the README.md file of that repository will be shown in your profile.</p>
<p>The repository, as you might guess, has to also have a README.md file (which is the file that will be shown in your profile page). You can initialise this when you are creating your repository.</p>
<p><img src="./images/Screenshot-2020-07-17-at-2.06.57.png" alt="You can initialise the GitHub profile readme file when creating the repo."></p>
<p>Once you have your repository created, go check you profile page and you can see that the readme file is displayed on top of your pinned repositories.</p>
<p>What does your GitHub profile readme file look like? Comment your GitHub profile below!</p>



GitHub released a new feature few days ago: GitHub profile readme! You can now add a readme file to be displayed on your GitHub profile page.

_See also [If you use Git and VS Code – Read This!](/blog/if-you-use-git-and-vs-code-read-this/)_

This is a great way to tell more about yourself or for example advertise your blog or YouTube channel. The readme file supports markdown so you can do same things that you can with normal readme files in GitHub.

I uploaded a video to my YouTube channel where I show you how to add a readme file to your own GitHub profile. On the video I also go through couple of very cool and creative ways to use the readme file to boost your GitHub profile. You can watch the video below or clicking [here](https://www.youtube.com/watch?v=9sxWizm4--w).

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

If you rather read, here is a short summary on how to add the readme file to your profile (I still strongly recommend checking out [the video](https://www.youtube.com/watch?v=9sxWizm4--w) and I would very much appreciate if you also subscribed to [my YouTube channel](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw), so you stay up to date on more videos I upload).

The way it works is you need to create a new repository and name it the same as your GitHub username is. So for example my GitHub username is tumetus, so I need to create a repository with name tumetus.

![GitHub profile readme is hinted when creating the repository.](/blog-posts/how-to-add-github-profile-readme-new-feature/images/Screenshot-2020-07-17-at-2.06.45.png)

When you create the repository, you see a notification that you are creating a special repository and that the README.md file of that repository will be shown in your profile.

The repository, as you might guess, has to also have a README.md file (which is the file that will be shown in your profile page). You can initialise this when you are creating your repository.

![You can initialise the GitHub profile readme file when creating the repo.](/blog-posts/how-to-add-github-profile-readme-new-feature/images/Screenshot-2020-07-17-at-2.06.57.png)

Once you have your repository created, go check you profile page and you can see that the readme file is displayed on top of your pinned repositories.

What does your GitHub profile readme file look like? Comment your GitHub profile below!


GitHub profile README is here! This is an awesome feature and every developer needs to use it! Learn now how to add readme file to your own GitHub profile!

How to add GitHub Profile README (new feature)

<p>I like Star Wars movies, I like Yoda and I like <a href="/blog/react-for-beginners-complete-guide-to-mastering-react-fundamentals/">coding in React</a>. Well I thought that maybe I could combine these three in my next React project. That's when I got the idea to create a React application that can translate English to Yoda (yodish).</p>
<h2>Planning the application</h2>
<p>For translating English to Yoda, I decided to use a <a href="https://funtranslations.com/api/yoda">R</a><a href="https://funtranslations.com/api/yoda">EST</a> <a href="https://funtranslations.com/api/yoda">API</a> that does all the heavy lifting for us. It is a public API so we don't need any authentication or api keys to use it. We can just send the text as a text parameter and we get the translation as a response.</p>
<p>On the front end I used create-react-app to initialise a React project and then added a simple UI with a text input, button and a couple of labels.</p>
<p><img src="./images/Screenshot-2020-09-29-at-19.37.13-1024x375.png" alt="React project application UI."></p>
<p>The UI of the finished application.</p>
<p>The text input takes the text we want to translate, the button initialises the API request and the labels are there for… well what are labels usually for.</p>
<h2>Finished application</h2>
<p>I recorded the whole process of building the app and uploaded it on YouTube. You can watch the video <a href="https://youtu.be/LT8hAGnju9g">here</a>.</p>
<p>I also got a little creative filming the video and added an intro which I strongly recommend you check out. I think it turned out pretty cool. Let me know in the comments what you think about it!</p>
<p><a href="http://www.youtube.com/watch?v=LT8hAGnju9g"><img src="http://img.youtube.com/vi/LT8hAGnju9g/0.jpg" alt="Building Star Wars React application (REST API)"></a></p>
<p>I also uploaded the finished project to Github if you want to take a look. You can find the project <a href="https://github.com/tumetus/yoda-translator-app">here</a>.</p>
<h2>Conclusion</h2>
<p>Even though the app was pretty straight forward and simple to make, I still had a lot of fun making it. And if you are new to React, I recommend watching <a href="https://youtu.be/LT8hAGnju9g">the video</a> because it teaches the basics on how to use a REST API with React, which itself is a must have tool in a React developers toolbox.</p>



I like Star Wars movies, I like Yoda and I like [coding in React](/blog/react-for-beginners-complete-guide-to-mastering-react-fundamentals/). Well I thought that maybe I could combine these three in my next React project. That's when I got the idea to create a React application that can translate English to Yoda (yodish).

## Planning the application

For translating English to Yoda, I decided to use a [R](https://funtranslations.com/api/yoda)[EST](https://funtranslations.com/api/yoda) [API](https://funtranslations.com/api/yoda) that does all the heavy lifting for us. It is a public API so we don't need any authentication or api keys to use it. We can just send the text as a text parameter and we get the translation as a response.

On the front end I used create-react-app to initialise a React project and then added a simple UI with a text input, button and a couple of labels.

![React project application UI.](/blog-posts/react-project-i-coded-a-star-wars-yoda-translator-app/images/Screenshot-2020-09-29-at-19.37.13-1024x375.png)

The UI of the finished application.

The text input takes the text we want to translate, the button initialises the API request and the labels are there for… well what are labels usually for.

## Finished application

I recorded the whole process of building the app and uploaded it on YouTube. You can watch the video [here](https://youtu.be/LT8hAGnju9g).

I also got a little creative filming the video and added an intro which I strongly recommend you check out. I think it turned out pretty cool. Let me know in the comments what you think about it!

[![Building Star Wars React application (REST API)](http://img.youtube.com/vi/LT8hAGnju9g/0.jpg)](http://www.youtube.com/watch?v=LT8hAGnju9g)

I also uploaded the finished project to Github if you want to take a look. You can find the project [here](https://github.com/tumetus/yoda-translator-app).

## Conclusion

Even though the app was pretty straight forward and simple to make, I still had a lot of fun making it. And if you are new to React, I recommend watching [the video](https://youtu.be/LT8hAGnju9g) because it teaches the basics on how to use a REST API with React, which itself is a must have tool in a React developers toolbox.


In this React project you learn how to create a simple React application and how to use a REST API with React in your next React project.

How to add GitHub Profile README (new feature)

Subscribe to the newsletter