Why React: It is a JS library by Facebook to create web user interfaces.
Features of React:
1. Virtual DOM : best for performance.
2. Reactive Updates
3. Writing HTML in JS code rather than code templating (code placeholders and if -switches)
Building blocks of React:
1. Components - Functional components and Class components
2. Props and States
3. JSX
4. React Hooks
5. Redux (Flux)
Playgrounds:
https://jscomplete.com/playground
JSX: Javascript XML
equivalent to :
React.createElement(
Sum, {a:3, b:4}, null
)
React Data flow:
Ways to create React components:
1. createClass
2. ES classes
3. Functions
4. Arrow functions
equivalent to :
React.createElement(
Sum, {a:3, b:4}, null
)
React Data flow:
Ways to create React components:
1. createClass
2. ES classes
3. Functions
4. Arrow functions
We have used create-react-app introduced by Facebook which takes away 70% of boilerplate setup.
This is a wrapper so you don’t need to worry about environment setups, Webpack configurations, bundle properties, dev server and so much more.
All of this headache is handled by Facebook so all your worry is around building application.
create-react-app provides us complete environment setup with React but these days an application need more than just React. Applications are growing fast and stuff like state management goes out of hand quickly.
Create a component :
1. Using the createClass factory
var Todolist = React.createClass({
render: function() {
return (
<div></div>
);
}
})
2. Extending React.Component
import React from 'react';
export default class Todolist extends React.Component
{
render() {
return (
<div>
<h1 className="header">React Component</h1>
</div>
)
}
}
There are two ways to pass data to a render() method using the React API
1. Props
2. State
Lets create a TODO List component :
import React from 'react';
import TodoItem from './TodoItem';
export default class Todolist extends React.Component
{
render() {
let todoItemsData = [
{
id: 1,
title: 'Learn Javascript',
desc: 'Lorem ipsum description 1',
priority:'high',
date: 'Jun 1, 2012'
},
{
id: 2,
title: 'Learn React',
desc: 'Lorem ipsum description 2',
priority:'medium',
date: 'Jul 1, 2015'
},
{
id: 3,
title: 'Build a React App',
desc: 'Lorem ipsum description 3',
priority:'low',
date: 'Jun 1, 2011'
}
];
return (
<div class="container page-todo bootstrap snippets bootdeys">
<div class="col-sm-7 tasks">
<div class="task-list">
<h1>TODO List</h1>
{todoItemsData.map(item => (
<TodoItem key={item.id} data={item} />
))}
<div class="clearfix"></div>
</div>
</div>
</div>
)
}
}
import React from 'react';
export default class Todolist extends React.Component
{
constructor(props)
{
super(props);
console.log(props.data);
}
render() {
let priorityClasses = ['priority task', this.props.data.priority].join(' ');
return (
<div class={priorityClasses}>
<div class="checkbox">
<input type="checkbox" />
</div>
<div class="desc">
<div class="title">{this.props.data.title}</div>
<div>{this.props.data.desc}</div>
</div>
<div class="time">
<div class="date">{this.props.data.date}</div>
</div>
</div>
)
}
}
Now use this component :
import logo from './logo.svg';
import './App.css';
import Todolist from './Todolist';
function App() {
return (
<div className="App">
<Todolist />
</div>
);
}
export default App;
CSS used in App.css
body{
margin-top:10px;
background:#eee;
}
.page-todo .tasks {
background: #fff;
padding: 0;
border-right: 1px solid #d1d4d7;
margin: -30px 15px -30px -15px
}
.page-todo .task-list {
padding: 30px 15px;
height: 100%
}
.page-todo .graph {
height: 100%
}
.page-todo .priority.high {
background: #fffdfd;
margin-bottom: 1px
}
.page-todo .priority.high span {
background: #f86c6b;
padding: 2px 10px;
color: #fff;
display: inline-block;
font-size: 12px
}
.page-todo .priority.medium {
background: #fff0ab;
margin-bottom: 1px
}
.page-todo .priority.medium span {
background: #f8cb00;
padding: 2px 10px;
color: #fff;
display: inline-block;
font-size: 12px
}
.page-todo .priority.low {
background: #cfedda;
margin-bottom: 1px
}
.page-todo .priority.low span {
background: #4dbd74;
padding: 2px 10px;
color: #fff;
display: inline-block;
font-size: 12px
}
.page-todo .task {
border-bottom: 1px solid #e4e5e6;
margin-bottom: 1px;
position: relative
}
.page-todo .task .desc {
display: inline-block;
width: 75%;
padding: 10px 10px;
font-size: 12px
}
.page-todo .task .desc .title {
font-size: 18px;
margin-bottom: 5px
}
.page-todo .task .time {
display: inline-block;
width: 15%;
padding: 10px 10px 10px 0;
font-size: 12px;
text-align: right;
position: absolute;
top: 0;
right: 0
}
.page-todo .task .time .date {
font-size: 18px;
margin-bottom: 5px
}
.page-todo .task.last {
border-bottom: 1px solid transparent
}
.page-todo .task.high {
border-left: 2px solid #f86c6b
}
.page-todo .task.medium {
border-left: 2px solid #f8cb00
}
.page-todo .task.low {
border-left: 2px solid #4dbd74
}
.page-todo .timeline {
width: auto;
height: 100%;
margin: 20px auto;
position: relative
}
.page-todo .timeline:before {
position: absolute;
content: '';
height: 100%;
width: 4px;
background: #d1d4d7;
left: 50%;
margin-left: -2px
}
.page-todo .timeslot {
display: inline-block;
position: relative;
width: 100%;
margin: 5px 0
}
.page-todo .timeslot .task {
position: relative;
width: 44%;
display: block;
border: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}
.page-todo .timeslot .task span {
border: 2px solid #63c2de;
background: #e1f3f9;
padding: 5px;
display: block;
font-size: 11px
}
.page-todo .timeslot .task span span.details {
font-size: 16px;
margin-bottom: 10px
}
.page-todo .timeslot .task span span.remaining {
font-size: 14px
}
.page-todo .timeslot .task span span {
border: 0;
background: 0 0;
padding: 0
}
.page-todo .timeslot .task .arrow {
position: absolute;
top: 6px;
right: 0;
height: 20px;
width: 20px;
border-left: 12px solid #63c2de;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-right: -18px
}
.page-todo .timeslot .task .arrow:after {
position: absolute;
content: '';
top: -12px;
right: 3px;
height: 20px;
width: 20px;
border-left: 12px solid #e1f3f9;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent
}
.page-todo .timeslot .icon {
position: absolute;
border: 2px solid #d1d4d7;
background: #2a2c36;
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
height: 30px;
width: 30px;
top: 0;
left: 50%;
margin-left: -17px;
color: #fff;
font-size: 14px;
line-height: 30px;
text-align: center;
text-shadow: none;
z-index: 2;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}
.page-todo .timeslot .time {
background: #d1d4d7;
position: absolute;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
top: 1px;
left: 50%;
padding: 5px 10px 5px 40px;
z-index: 1;
margin-top: 1px
}
.page-todo .timeslot.alt .task {
margin-left: 56%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box
}
.page-todo .timeslot.alt .task .arrow {
position: absolute;
top: 6px;
left: 0;
height: 20px;
width: 20px;
border-left: none;
border-right: 12px solid #63c2de;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: -18px
}
.page-todo .timeslot.alt .task .arrow:after {
top: -12px;
left: 3px;
height: 20px;
width: 20px;
border-left: none;
border-right: 12px solid #e1f3f9;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent
}
.page-todo .timeslot.alt .time {
top: 1px;
left: auto;
right: 50%;
padding: 5px 40px 5px 10px
}
@media only screen and (min-width:992px) and (max-width:1199px) {
.page-todo task .desc {
display: inline-block;
width: 70%;
padding: 10px 10px;
font-size: 12px
}
.page-todo task .desc .title {
font-size: 16px;
margin-bottom: 5px
}
.page-todo task .time {
display: inline-block;
float: right;
width: 20%;
padding: 10px 10px;
font-size: 12px;
text-align: right
}
.page-todo task .time .date {
font-size: 16px;
margin-bottom: 5px
}
}
@media only screen and (min-width:768px) and (max-width:991px) {
.page-todo .task {
margin-bottom: 1px
}
.page-todo .task .desc {
display: inline-block;
width: 65%;
padding: 10px 10px;
font-size: 10px;
margin-right: -20px
}
.page-todo .task .desc .title {
font-size: 14px;
margin-bottom: 5px
}
.page-todo .task .time {
display: inline-block;
float: right;
width: 25%;
padding: 10px 10px;
font-size: 10px;
text-align: right
}
.page-todo .task .time .date {
font-size: 14px;
margin-bottom: 5px
}
.page-todo .timeslot .task span {
padding: 5px;
display: block;
font-size: 10px
}
.page-todo .timeslot .task span span {
border: 0;
background: 0 0;
padding: 0
}
.page-todo .timeslot .task span span.details {
font-size: 14px;
margin-bottom: 0
}
.page-todo .timeslot .task span span.remaining {
font-size: 12px
}
}
@media only screen and (max-width:767px) {
.page-todo .tasks {
position: relative;
margin: 0!important
}
.page-todo .graph {
position: relative;
margin: 0!important
}
.page-todo .task {
margin-bottom: 1px
}
.page-todo .task .desc {
display: inline-block;
width: 65%;
padding: 10px 10px;
font-size: 10px;
margin-right: -20px
}
.page-todo .task .desc .title {
font-size: 14px;
margin-bottom: 5px
}
.page-todo .task .time {
display: inline-block;
float: right;
width: 25%;
padding: 10px 10px;
font-size: 10px;
text-align: right
}
.page-todo .task .time .date {
font-size: 14px;
margin-bottom: 5px
}
.page-todo .timeslot .task span {
padding: 5px;
display: block;
font-size: 10px
}
.page-todo .timeslot .task span span {
border: 0;
background: 0 0;
padding: 0
}
.page-todo .timeslot .task span span.details {
font-size: 14px;
margin-bottom: 0
}
.page-todo .timeslot .task span span.remaining {
font-size: 12px
}
}
What is Flux?
Flux is an architectural design of Facebook application. It is certainly not MVC.
Flux is essential to React because it helps to promote the use of React components in the way they are intended.
Flux does this by creating a one-directional data flow. Data flows through three main portions of the Flux architecture:
Dispatcher,
Stores,
and React views
Target UI:
