teleren/devto huggingface dataset:
Classes vs Functional components in React
Tags: react, javascript
Published: 2020-06-01 22:39:28

In React, we can either use classes or functions for our components.

## Classes
As you may have noticed in the first part of this series, we can create a React component as a class. To do so, we have to extend a `React.Component` class and implement its `render()` method. 
This method must return either one root element or a fragment.
* This class renders a `<div>` and its contents.
```React
export default class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Todo list</h1>
      </div>
    );
  }
}
```

* This class renders a fragment.
```React
export default class TodoList extends React.Component {
  render() {
    return (
      <>
        <h1>Todo list</h1>
        <h1>Second element</h1>
      </>
    );
  }
}
```

Alternatively
```React
export default class TodoList extends React.Component {
  render() {
    return (
      <React.Fragment>
        <h1>Todo list</h1>
        <h1>Second element</h1>
      </React.Fragment>
    );
  }
}
```

Using fragments enables us to have multiple elements on the same level without having any `<div>` around them.
## Functions
Instead of classes, we can write our components as functions.
The rules for the export and import are the same as with classes.
The function itself must return either one root element or a fragment.

### Default export
* Named function
```React
export default function TodoList() {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
}
```

* Anonymous function

When using default export, we may omit the name completely.
However, I do not recommend this.
```React
export default function () {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
}
```

* Named arrow function
```React
const TodoList = () => {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};

export default TodoList;
```

* Anonymous arrow function
```React
export default () => {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};
```

### Named export
* Named function
```React
export function TodoList() {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
}
```

* Named arrow function
```React
export const TodoList = () => {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};
```

Another not so fashionable option could be
```React
export const TodoList = function () {
  return (
    <div>
      <h1>Todo list</h1>
    </div>
  );
};
```

Personally, I prefer writing the React components as arrow functions.
Export / Import components in React
Tags: react, javascript, modules
Published: 2020-06-01 22:32:43

Like with anything in programming, there are multiple ways to do the same thing.
In React app, we start with one main component, called App by default and compose it from other components. It is a good practice to have one component per file. When we want to use that component in another file, we have to export it from its file and import it in the file where we want to use it.

Therefore, I would like to address some ambiguity when using exports.
## Named export

```React
class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Todo list</h1>
      </div>
    );
  }
}
export { TodoList };
``` 

This is equivalent to
```React
export class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Todo list</h1>
      </div>
    );
  }
}
```

Then, we can import it using
```React
import { TodoList } from './TodoList';
```

## Default export
```React
class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Todo list</h1>
      </div>
    );
  }
}

export default TodoList;
```

Again, this is equivalent to
```React
export default class TodoList extends React.Component {
  render() {
    return (
      <div>
        <h1>Todo list2</h1>
      </div>
    );
  }
}
```

Then, we can import it using
```React
import TodoList from './TodoList';
```
or even
```React
import MyList from './TodoList';
```

The name by which we import it does not really matter at this point.

In React it's a convention to export one component from a file, and to export it as the default export.
What do you think of this idea?
Published: 2020-06-01 22:31:48

What dot you think of this idea?

I have been thinking of making a website where I would host monthly hackathons in a similar fashion to Ludum Dare.

If the idea went ahead I would slowly introduce weekly mini hackathons. 
 
What does everyone think? 
Is it an idea worth me going ahead with?
What things would you like to see on it?
If you wish to join me on this project, comment what you would like to help with and how I can contact you.
Day 144 : Insane
Tags: hiphop, code, coding, lifelongdev
Published: 2020-06-01 22:13:53

_liner notes_:
- Saturday : Did the radio show and spoke about quite a few things. The recording is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of black blank image with the words May 30th 2020, Away Team](https://dev-to-uploads.s3.amazonaws.com/i/qfsqvcr4dn42jmd4gdef.jpg)

- Sunday : Did some coding but mostly watched the madness that was happening around the country.

- Professional : This morning, I had a meeting with my manager to go over some of the work I did last week. Went well and found some more things we can dive into. The team working on Web Components had a meeting so it was good to see everyone involved and introduce myself. Had a company wide meeting. Good to hear where the focus is during this time. Then I worked on what my manager and I spoke about earlier.

- Personal : Did some more work on my side project. Fixed the mode where now either pressing the play button or the countdown button will start and pause the counter. Now I want to work on the alarm that sounds when the countdown is finished. Then it's on to the Pomodoro portion.

![Close up of a stunted pine in a field](https://dev-to-uploads.s3.amazonaws.com/i/dpoaeyjssxmkwi8abz1o.png)

With everything being insane, came across a pretty cool resource https://www.joincampaignzero.org/

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube q2UWhtHmq-M %}
My UI Ear 👂 Worm
Tags: codepen, css, design, discuss
Published: 2020-06-01 21:56:53

A couple of years back, I say a couple, probably about 10 years ago, Microsoft had this development team with a website, the design really stuck in my head, for the last few years I tried to remember the name of this now discontinued project. Although I did remember the name (Ubelly) and found 1 image in pinterest that I was able to recreate the style. Here is that very distinct style that I really like.

How could this be modernised?
Have you got a UI ear worm you want to share?

{% codepen https://codepen.io/acronamy/pen/wvMwmKa %}
Job-seeking advice based on promotion-seeking advice
Tags: career
Published: 2020-06-01 21:46:49

<em>Based off [this series of tweets](https://twitter.com/Chad_R_Stewart/status/1263530338636234753) I made that felt would have made a better blog post.</em>
<br>
<br>
So this is advice I came across for promotion seekers that is <b>ALSO</b> valuable for job seekers.
<br>
I'll explain...
<br>
The advice I hear when someone is looking for a promotion is to just start taking on the responsibilities of the role you want and document doing so. Now you can say <em>"Hey, I've been doing this job already. It's a no-brainer giving me the position."</em>

Office politics aside, it's really sound advice. The thing is, if you think about it, it can also apply to job searching. Employers are looking for people to get ramped up fast so when advertising yourself to an employer, try to show evidence that you've already been 'doing the job' they want to hire you for. This is especially important for less experienced candidates whose biggest hurdle is proving that their value-add will be bigger than the investment made in actually training them.

So now you need responsibilities to emulate. Job descriptions are a great place to start but I'd say you need to start networking with employers. If you have companies you are interested in working for, ping their devs (respectfully) and ask for a few moments of their time. Ask about their tech stack, what system does their team operate under, what problems they are trying to solve and what skills can a new person come in with that would be of great help to them. These questions can be asked of others in the organization as well. Different people in different departments will have different pain points they’re trying to resolve. The networking also helps solidify you in their memory because you’ve engaged with them.

Take that information that you’ve learned and now leverage it by learning those things, even at a beginner level, attempting to solve those problems and document your journey doing so. Now you've made yourself much more of a 'no-brainer'.

Obviously this is far from fool-proof but, especially for newer members of our industry, it gives you a lot of leverage to play with during your job search. You'll be producing projects and documenting your learning so even if it's not in a company's stack, you still have proof you can do the work or have ideas on how to get the work done:

Before I end, I would like to mention two caveats to this approach.
<ol>
<li>While this helps getting an interview, you may still have to leverage other job searching techniques to get a hiring manager to notice you to get an interview.</li>

<li>Interviewing itself unfortunately is a separate skill so you want to cultivate that in addition to trying this.</li>
</ol>
Anyhow, just some thoughts I had randomly that I thought would make good advice and wanted to share. I hope this was helpful and have a great one!
Second full-stack app: Roomie - Find a room to rent! Built with: React + TailwindCSS + Express + MongoDB + Heroku / S3
Tags: react, node, javascript, showdev
Published: 2020-06-01 21:26:19

Hey, devs!

I've been studying for a few months now and after one month and 25 deploys, this is my second full-stack project: Roomie - a website to find rooms to rent or to list your place. 😅

I created this for the sake of learning only and since my first full-stack project was a simple CRUD app, it was a blast having this experience!

**demo:** [https://roomiew.herokuapp.com/](https://roomiew.herokuapp.com/)
**repo:** [https://github.com/lucasmrl/roomie](https://github.com/lucasmrl/roomie)


**Built with:**

* FE: React (Hooks, Context API, Router) + TailwindCSS

* BE: Node.js (Express.js) + MongoDB

* Hosted on Heroku / Images in AWS S3


**What I tried to learn:**

* Authentication (Sign up, Log in, Log out, Reset password)

* API Filtering, Sorting, Pagination (Even though it is not implemented in the FE)

* Send e-mails from back-end

* Upload pictures to S3

* Security

* TailwindCSS (first time using it)

* Agile methodology (tried to organize my user stories, sprints, daily stand-up meeting, ...)

Definitely it is far from perfect, but it helped me a least to get my hands dirty. I appreciate any feedback!

Be safe! ;)
PHP Questions and Answers APK
Published: 2020-06-01 21:26:09

PHP Question and Answers - This Application is very useful for the students who are learning PHP and preparing for CAMPUS INTERVIEWS. As you know, now a days in every Competitive exams , Multiple Choice questions are there. This App has 100 Multiple Choice questions along with their correct answers. These question are frequents asked in Exams like GATE , NET and SLATE.

This App Helps the students to prepare themselves for the Exams. Every Question has 4 options . You have to choose the right one. There is no time limit. If you have chosen the right Answer , it will show you the option that you choose in green color and move to the next question. If you have chosen the WRONG answer, it displays your choice in RED and then the RIGHT Option in GREEN. This helps you to know the right answer for the question and to remember it for the exam.

At the end of session , it displays the results with a PIE graph. You can share this result with your friends. If you want to learn more about the subject, the App also has tutorials for FREE. This is a comprehensive tool that prepares you for the PHP Exam.
https://aapks.com/apk/php-rndcs/
Next Right Now v2 - Play around with Next.js v9.4 using SSG/SSR, incremental builds, fallback builds, preview mode and more!
Tags: nrn, nextjs, ssg, react
Published: 2020-06-01 21:06:08



Hello **React** lovers.

We recently released NRN v2, which features building web apps using **Next.js** framework (9.4) and GraphQL/**GraphCMS**. :tada:

> Next Right Now (NRN) is meant to help you build production-grade projects using the Next.js framework. It can be used as a boilerplate to **start a new project**, or as an **educational resource**.

**The v2 version brings the following features out of the box**:
- SSG: Static pages (per-page configuration SSG/SSR)
- Preview mode: Preview dynamic content on “static” pages
- Incremental rebuild: Rebuild part of your app incrementally (per-page configuration) to automatically keep static content up-to-date
- Partial pre-build: Use fallback option to build your pages on-demand, and have them statically served afterwards
- Full TS support
- Hosted on Vercel
- Advanced stages and secrets configuration
- SaaS B2B advanced support (monorepo design)
- I18n/Localisation
- Automated deployments (CI/CD) using Github Actions
- Monitoring, testing and analytics
- Integrated documentation website using Jekyll and GitHub Pages

**Demo**: https://nrn-v2-mst-aptd-gcms-lcz-sty-c1.now.sh (play around with SSG/SSG, incremental builds, fallback builds, preview mode and more!)

**Repo**: https://github.com/UnlyEd/next-right-now

---

**What's next?**

NRN next preset will be an Airtable integration (instead of GraphCMS), to showcase how to consume a REST-ish API

---

_NRN is officially recommended by [React i18next](https://react.i18next.com/latest/ssr) for internationalising Next.js apps_
100 Days of SwiftUI — Day 12
Tags: 100daysofswiftui
Published: 2020-06-01 20:50:22

---
title: 100 Days of SwiftUI — Day 12
published: true
date: 2020-06-01 20:49:54 UTC
tags: 100daysofswiftui
canonical_url: https://zeitschlag.net/100-days-of-swiftui-day-12/
---

I'm nearly done with the first part of the SwiftUI-course: Tomorrow starts the review of the Swift-part and today was basically the last day about Swift-basics. And the only important thing missing were [optionals](https://developer.apple.com/documentation/swift/optional).

And boy, that was quite a lot for one day: Eleven videos, optional — pun intended — additional texts to read and the tests. Today I learned, that the `??` operator is called nil coalescing.

As I said: Today took quite some time and while the first eleven days didn't take me a full hour per day, I'm in doubt (again) if I can manage to spend an hour per day on this course. We'll see, I'll try.

<!--kg-card-end: markdown-->
Things I wish I’d known before I learnt how to code
Tags: beginners, codenewbie, career, productivity
Published: 2020-06-01 20:33:03

1. Don't give up, don't let more than a month pass without doing something that takes at least a few hours. I could have been in a decent job a lot sooner if I hadn't.

2. Taking a *silent* rest break with a cup of tea generally helps solve a pesky bug a lot faster than frantic Googling. 

3. Avoid tutorial fatigue. Start a project that will excite you that’s just within your grasp and learn along the way. 

4. Resist the urge to take shortcuts, especially when learning something new. Take time to consider new concepts and research them from more than one learning source. 

5. Don’t forget soft skills. This will aid career progression as much as knowing the inns and outs of any particular language.  

6. You will forever be walking a tightrope of overconfidence and imposter syndrome. Acknowledge and manage it, stay humble and stay thirsty for knowledge. 

7. Stop coding on your own. Find local events or join remotely. Share your code and take the criticism. Have a go with an open source project and get stuck in to a few pull requests.

8. Do not underestimate diet and exercise. It is more closely tied to the performance of brain function than we realise. You can always afford 10 mins and the benefits are huge. 

9. The 20 hours principle. It bloody works.  Get familiar with it, get strict, and commit to it. 

10. Reflect on what you’ve learnt and write it up, maybe share it on dev.to...
More secure `fetch`, but not overdone like Axios?
Tags: discuss, javascript
Published: 2020-06-01 20:30:17

I love `fetch` in that I can easily control whether to output JSON or plainText via chaining; but obviously, it is lacking a URL builder.

I do love `axios` in that I can create an Instance, but sometimes I don't get whether it will return JSON or plainText (by default settings, i.e. no transformers)?

Also, WHATWG `URL` object might be doing it wrong, keeping `.searchParams` and `.href` apart, making it impossible for chaining?
Machine learning, not my lullaby, dear Gran 😀 
Tags: machinelearning, beginners
Published: 2020-06-01 20:28:08

Hey Gran, look what I made at school today! It uses ML...

I'm tired of you youngsters using slang; now what's ML supposed to mean, **my lullaby**?

*After a fit of laughter* No, it is machine learning. I can make my phone understand what number I drew! Look, if I make a 3 on the screen, it says I made a three. Even when I make it weird looking, it gets it.

Good lord, my fears are coming to life, carry me before the machines take over us! Sonny, what you're making is going to kill us all.

Ah grandma, it's just recognising my handwriting... I'll tell you what's happening.

---

This code that I have written reads the image I draw. It arranges everything nicely in a grid of 1s and 0s. For all the black colours a zero, for the white colours a one. Then after some math, it tells me what I drew.

You see, the math is the important part over here. If you get it right, we can do wonderful things. But that is the main part, but it is complicated. We are yet to understand it's language. It is like Ma talking in French, I don't understand it. But if I can get the dictionary, I can translate it.

Similarly, we can use some equations to make the code do stuff. But it is a foreign language that we have to translate. The thing is, we have just begun here. We are still creating the dictionary that will help us understand that language of 1s and 0s.

---

So it's gonna take a while to have the robot apocalypse.

That's better, at least I can make my cookies in peace!
Netlify and Google Domains
Tags: webdev, tutorial
Published: 2020-06-01 20:25:27

---
title: Netlify and Google Domains
published: true
description: Quick tutorial to demonstrate how to you point your domain to your netlify site.
tags: webdev, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9fwrgqkvo25uw8cvhyr6.jpg
---
I have bought my own domain for a blog! I have always wanted to do and now i did! I went with google domains as it was the cheapest domain I could find. There was a good £15 difference between sites so make sure to shop around!

The buying process was very simple - i just had to put in my card details and address. The set up.... should have been simpler. 

I have hosted my site on netlify but the process should be similar. 

**Netlify** 

1. In your netlify console,  go to your site and then click Domain Settings.  Click the green button "Add custom domain".
Alternatively, there will be a "getting started" banner with option 2 being "Set up your custom domain". Click that.

2. You will now be asked to provide the name of the domain you have bought. In my case it was "ewa.dev".
If you own the domain the site will ask you to verify that you are the owner. Bare in mind Netlify can also provide you with a domain. 

3. Click "verify". 

4. Netlify will now redirect you to your domain settings where you will see your domain. You will see that your domain will have have a warning, to ask you to "check your DNS configuration".  Click to Options -> Set Up Netlify DNS. 

5. There is now 3 steps: 
5.1 Add domain - Netlify will ask you to re-verify your domain name 
5.2 Add DNS records  - The DNS records for your Netlify sites will be configured automatically. Unless you have email set up with your domain, you can skip this bit.
5.3 Activate Netlify DNS - Nelify will give you names of their name savers. Keep them open and head to your domain name provider.

**Google Domains** 

6.  Go to your domain settings

7. Click DNS 

8. In the NameServers box, select option "Use custom nameservers". For googlr domains, before I was able to add my own custom domains, I had to disable DNSSEC. 

9. Add the name servers from Netlify to the google nameservers. 


And Thats it! Your domain is set up - it says it can take up to 48 hours, but in my experience its pretty speedy. Ewa.dev took only 15 min to kick in. 

Happy Coding!
Semantic HTML by real-life examples
Tags: html, beginners, webdev
Published: 2020-06-01 20:02:09

On my way of learning semantic HTML, I found it very useful to take a look at how other big players cope with that. 

I prepared for you two examples of how Twitter and Dev.to use semantic HTML tags like `article`, `section`, or `nav` on their home page. I'll continue that series if you find it interesting too.

## Dev.to
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/65k2vgs9d6adeqro4p8t.png)


## Twitter
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i0lqrj96siwd00kwrxv6.png)
Offline Notice In React Native
Tags: reactnative, javascript, web, frontend
Published: 2020-06-01 20:01:32

---
title: Offline Notice In React Native

published: true
description: 
tags: react-native, javascript, web, frontend, web
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/28bcw47lskcoybrljmki.gif
---
Offline Notice In React Native

Have you ever seen the red “No Internet Connection” sign in mobile apps. It looks something like this:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rroxnwxga23kfgnaqvow.png)

I will show you how to create this in your React Native application.

**Step 1:**

NetInfo exposes info about online/offline status.

```javascript
import { NetInfo } from 'react-native’
```

**Step 2:**

Add the below snippet into main file where you import Netinfo:

```javascript
constructor() {
	super();
	this.state = {
		isConnected: true
	};
}
```
Our componentDidMount should look like this:

```javascript
componentDidMount() { 		   	   
     NetInfo.isConnected.addEventListener('connectionChange',
     this.handleConnectivityChange);
},
```

Also it is good practise to remove event listeners when your component is about to be unmounted to avoid any memory leakage, so we would do that in the componentWillUnmount lifecycle method.
```javascript
componentWillUnmount() {  
    NetInfo.isConnected.removeEventListener('connectionChange', 
    this.handleConnectivityChange);
}
```

In render:
```javascript
render() {
  {!this.state.isConnected ? <View>
      <Text>You are offline. Please check your connectivity</Text>
      </View>
      : <View><Text>Everything working fine!</Text></View>
  }
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jxoeixhrzscvd6qchwni.png)

Thanks for reading this article ♥

I hope you find helpful. Feel free to ping me in comment section or <a href="https://twitter.com/Suprabha11">@suprabha11</a> 😋


<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/Suprabha11"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
    </tr>
  </tbody>
</table>