rayets123

React Best practices

I have summarized and compiled a list of React.JS best practices from various sources across the internet.

From the React docs

• https://reactjs.org/docs/components-and-props.html

  • props must be readonly

• https://reactjs.org/docs/state-and-lifecycle.html

rayets123

Предположим, у меня есть список айтемов, где у каждого, например, есть кнопка удаления. По нажатию на кнопку просто вызывается какая-то функция, которая работает с backend API.

function ListItem({ data }) {
  return (
    <li className="list-item">
      {/* ... */}
 

rayets123

Frontend Developer Tech Task

We need to create an app to review movies from The Movie Database API.

Requirements:

• Use The Movie Database API(DOCS), we want to see your work with real data.
• On the Homepage, we should see a list of popular movies. There should be pagination or infinite scroll.
• When the user clicks on a movie card in the list, we go to the page where we will see detailed information about the movie.

rayets123

.rounded-corners-gradient-borders {
  width: 300px;
  height: 80px;
  border: double 4px transparent;
  border-radius: 80px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top left, #f00,#3020ff);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

rayets123

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

rayets123

async function bar() {
    await new Promise(r=> setTimeout(r, 1000))
    console.log('bar');
}
async function bam() {
    await new Promise((ignore, reject)=> setTimeout(reject, 2000))
      .catch(()=> { console.log('bam errored'); throw 'bam'; });
}
async function bat() {
    await new Promise(r=> setTimeout(r, 3000))

rayets123

sendNotification('Верните Линуса!', {
        body: 'Тестирование HTML5 Notifications',
        icon: 'icon.jpg',
        dir: 'auto'
});

function sendNotification(title, options) {
// Проверим, поддерживает ли браузер HTML5 Notifications
if (!("Notification" in window)) {
alert('Ваш браузер не поддерживает HTML Notifications, его необходимо обновить.');

rayets123

https://sarcadass.github.io/granim.js/examples.html

rayets123

http://codepen.io/foleyatwork/pen/HAomG/

rayets123

label 
						position: relative
				    width: 10px
				    height: 10px
				    display: block
						input[type="checkbox"] + span 
						  position: absolute
						  left: 1px 
						  top: 5px
						  width: 11px