React Tutorial - Create a Simple Todo Application in 20 minutes.

Published: 02 November 2017
on channel: Fullstack Development

30,421

278

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, duration hours minute second in high quality that is uploaded to the channel Fullstack Development 02 November 2017. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 30,421 times and liked it 278 visitors.

150