React Tutorial - Create a Simple Todo Application in 20 minutes.
Featured Full Courses:
React JS - The Complete Guide (over 150 000 devs enrolled)
https://bit.ly/2oCrfH0
React JS Web Development - The Essentials Bootcamp
https://bit.ly/2oEK2S1
The Complete React Js & Redux Course - Build Modern Web Apps
https://bit.ly/2mWNebj
The Complete React Native + Hooks Course
https://bit.ly/2mofraC
React Native - The Practical Guide
https://bit.ly/2nTm98O
The Complete JavaScript Course
https://bit.ly/2mjsbiB
In this tutorial we will create a simple todo application with React for Web in 20 minutes.
CSS:
{
margin: 0px;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
body {
background: #f1f1f1;
}
#root {
width: 100%;
height: 100%;
}
/* Our App Container */
.container {
padding-bottom: 80px;
}
/* The header */
.header {
font-size: 22px;
font-weight: bold;
font-style: italic;
color: #f1f1f1;
background: #3367d6;
padding: 40px;
}
/* The note */
.note {
color: #adadad;
padding: 40px;
margin: 20px;
background: #fff;
border: solid 1px #e9e9e9;
cursor: pointer;
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.1);
transition: transform .2s ease;
}
.note:hover {
transform: scale(1.02);
}
/* The add note button */
.btn {
position: fixed;
z-index: 1;
right: 40px;
bottom: 40px;
width: 80px;
height: 80px;
border-radius: 100%;
text-align: center;
line-height: 80px;
font-size: 28px;
font-weight: bold;
color: #f1f1f1;
background: #3367d6;
cursor: pointer;
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.8);
-webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.8);
-moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.8);
transition: transform .06s ease;
}
.btn:hover {
transform: scale(1.2);
}
/* Textinput */
.textInput {
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
line-height: 80px;
padding: 0 20px;
border: none;
outline: none;
background: #2850a7;
font-size: 16px;
color: #f1f1f1;
}
Watch video React Tutorial - Create a Simple Todo Application in 20 minutes. online without registration, duration hours minute second in high quality. This video was added by user Fullstack Development 02 November 2017, don't forget to share it with your friends and acquaintances, it has been viewed on our site 30,421 once and liked it 278 people.