Skip to content

Commit 9d3410e

Browse files
indiTechCoderindiTechCoder
committed
section 6 & 7 added
1 parent e569b54 commit 9d3410e

File tree

351 files changed

+77717
-132
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

351 files changed

+77717
-132
lines changed

‎Section-02-React.js Fundamentals with JSX/Exercise files/React-JS-with ES5/01-React JS with JSX first Component/app/index.html

-1
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,5 @@
6464
</head>
6565
<body>
6666
<div id="app" />
67-
<script src="bundle.js" type="text/javascript"></script>
6867
</body>
6968
</html>

‎Section-02-React.js Fundamentals with JSX/Exercise files/React-JS-with ES5/01-React JS with JSX first Component/dist/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,5 @@
55
</head>
66
<body>
77
<div id="app" />
8-
<script src="bundle.js" type="text/javascript"></script>
9-
<script src="index_bundle.js"></script></body>
8+
109
</html>

‎Section-03-ES6 for React JS/ES6-Starter App/app/components/app.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React from 'react';
2+
import CreateTodo from './create-todo';
3+
import TodosList from './todos-list';
4+
5+
const todos = [
6+
{
7+
task: 'Get a life !',
8+
isCompleted: false
9+
},
10+
{
11+
task: 'Sen really sucks if we have to keep coding todo apps and other widgets:P',
12+
isCompleted: true
13+
}
14+
];
15+
16+
export default class App extends React.Component {
17+
constructor(props) {
18+
super(props);
19+
20+
this.state = {
21+
todos : todos
22+
};
23+
}
24+
render() {
25+
return (<div>
26+
<CreateTodo todos={this.state.todos} createTask={this.createTask.bind(this)} />
27+
<TodosList
28+
todos={this.state.todos}
29+
toggleTask={this.toggleTask.bind(this)}
30+
saveTask={this.saveTask.bind(this)}
31+
deleteTask={this.deleteTask.bind(this)}
32+
/>
33+
</div>
34+
);
35+
}
36+
37+
toggleTask(task) {
38+
const foundTodo = _.find(this.state.todos, todo => todo.task === task);
39+
foundTodo.isCompleted = !foundTodo.isCompleted;
40+
this.setState({ todos: this.state.todos });
41+
}
42+
43+
createTask(task) {
44+
this.state.todos.push({
45+
task,
46+
isCompleted: false
47+
});
48+
this.setState({ todos: this.state.todos });
49+
}
50+
51+
saveTask(oldTask, newTask) {
52+
const foundTodo = _.find(this.state.todos, todo => todo.task === oldTask);
53+
foundTodo.task = newTask;
54+
this.setState({ todos: this.state.todos });
55+
}
56+
57+
deleteTask(taskToDelete) {
58+
_.remove(this.state.todos, todo => todo.task === taskToDelete);
59+
this.setState({ todos: this.state.todos });
60+
}
61+
}

‎Section-03-ES6 for React JS/ES6-Starter App/app/components/create-todo.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
3+
export default class TodosList extends React.Component {
4+
constructor(props) {
5+
super(props);
6+
7+
this.state = {
8+
error: null
9+
};
10+
}
11+
12+
renderError() {
13+
if (!this.state.error) { return null; }
14+
15+
return <div style={{ color: 'red' }}>{this.state.error}</div>;
16+
}
17+
18+
render() {
19+
return (
20+
<form onSubmit={this.handleCreate.bind(this)}>
21+
<input type="text" placeholder="What do you want?" ref="createInput" />
22+
<button>Create a useless task :P</button>
23+
{this.renderError()}
24+
</form>
25+
);
26+
}
27+
28+
handleCreate(event) {
29+
event.preventDefault();
30+
31+
const createInput = this.refs.createInput;
32+
const task = createInput.value;
33+
const validateInput = this.validateInput(task);
34+
35+
if (validateInput) {
36+
this.setState({ error: validateInput });
37+
return;
38+
}
39+
40+
this.setState({ error: null });
41+
this.props.createTask(task);
42+
this.refs.createInput.value = '';
43+
}
44+
45+
validateInput(task) {
46+
if (!task) {
47+
return 'Dont try to joke, enter task';
48+
} else if (_.find(this.props.todos, todo => todo.task === task)) {
49+
return 'U wanna do the task again?';
50+
} else {
51+
return null;
52+
}
53+
}
54+
}

‎Section-03-ES6 for React JS/ES6-Starter App/app/components/todos-list-header.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
export default class TodosListHeader extends React.Component {
4+
render() {
5+
return (
6+
<thead>
7+
<tr>
8+
<th>Task</th>
9+
<th>Action</th>
10+
</tr>
11+
</thead>
12+
);
13+
}
14+
}

‎Section-03-ES6 for React JS/ES6-Starter App/app/components/todos-list-item.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React from 'react';
2+
3+
export default class TodosListItem extends React.Component {
4+
constructor(props) {
5+
super(props);
6+
7+
this.state = {
8+
isEditing: false
9+
};
10+
}
11+
12+
renderTaskSection() {
13+
const { task, isCompleted } = this.props;
14+
15+
const taskStyle = {
16+
color: isCompleted ? 'green' : 'red',
17+
cursor: 'pointer'
18+
};
19+
20+
if (this.state.isEditing) {
21+
return (
22+
<td>
23+
<form onSubmit={this.onSaveClick.bind(this)}>
24+
<input type="text" defaultValue={task} ref="editInput" />
25+
</form>
26+
</td>
27+
);
28+
}
29+
30+
return (
31+
<td style={taskStyle}
32+
onClick={this.props.toggleTask.bind(this, task)}
33+
>
34+
{task}
35+
</td>
36+
);
37+
}
38+
39+
renderActionsSection() {
40+
if (this.state.isEditing) {
41+
return (
42+
<td>
43+
<button onClick={this.onSaveClick.bind(this)}>Save</button>
44+
<button onClick={this.onCancelClick.bind(this)}>Cancel</button>
45+
</td>
46+
);
47+
}
48+
49+
return (
50+
<td>
51+
<button onClick={this.onEditClick.bind(this)}>Edit</button>
52+
<button onClick={this.props.deleteTask.bind(this, this.props.task)}>Delete</button>
53+
</td>
54+
);
55+
}
56+
57+
render() {
58+
return (
59+
<tr>
60+
{this.renderTaskSection()}
61+
{this.renderActionsSection()}
62+
</tr>
63+
);
64+
}
65+
66+
onEditClick() {
67+
this.setState({ isEditing: true });
68+
}
69+
70+
onCancelClick() {
71+
this.setState({ isEditing: false });
72+
}
73+
74+
onSaveClick(event) {
75+
event.preventDefault();
76+
77+
const oldTask = this.props.task;
78+
const newTask = this.refs.editInput.value;
79+
this.props.saveTask(oldTask, newTask);
80+
this.setState({ isEditing: false });
81+
}
82+
}

‎Section-03-ES6 for React JS/ES6-Starter App/app/components/todos-list.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import _ from 'lodash';
2+
import React from 'react';
3+
import TodosListHeader from './todos-list-header';
4+
import TodosListItem from './todos-list-item';
5+
6+
export default class TodosList extends React.Component {
7+
renderItems() {
8+
const props = _.omit(this.props, 'todos');
9+
10+
return _.map(this.props.todos, (todo, index) => <TodosListItem key={index} {...todo} {...props} />);
11+
}
12+
13+
render() {
14+
return (
15+
<table>
16+
<TodosListHeader />
17+
<tbody>
18+
{this.renderItems()}
19+
</tbody>
20+
</table>
21+
);
22+
}
23+
}

‎Section-03-ES6 for React JS/ES6-Starter App/app/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import React from 'react';
2+
import {render} from 'react-dom';
3+
import App from 'components/app';
14

2-
function stuff(a, x=12, y=42) {
3-
// Do stuff..
4-
}
5-
stuff(1, ,2);
5+
render(<App />,document.getElementById('app'));

‎Section-04 -React.js Fundamentals with ES6 & Web pack/ES6 Webpack React Router/lessons/07-more-nesting/modules/About.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22

3-
export default React.createClass({
3+
export default class {
44
render() {
5-
return <div>About</div>
5+
return <div>This is About Component Rendered...</div>
66
}
7-
})
7+
}

‎Section-04 -React.js Fundamentals with ES6 & Web pack/ES6 Webpack React Router/lessons/07-more-nesting/modules/App.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react'
2-
import NavLink from './NavLink'
2+
import { Link } from 'react-router'
33

44
export default class {
55
render() {
66
return (
77
<div>
88
<h1>React Router Tutorial</h1>
99
<ul role="nav">
10-
<li><NavLink to="/about">About</NavLink></li>
11-
<li><NavLink to="/repos">Repos</NavLink></li>
10+
<li><Link to="/about">About</Link></li>
11+
<li><Link to="/repos">Repos</Link></li>
1212
</ul>
1313
{this.props.children}
1414
</div>

‎Section-04 -React.js Fundamentals with ES6 & Web pack/ES6 Webpack React Router/lessons/07-more-nesting/modules/Repo.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React from 'react'
22

3-
const app = function(props) {
4-
render() {
5-
return (
6-
<div>
7-
<h2>{this.props.params.repoName}</h2>
8-
<h2>{this.props.params.userName}</h2>
9-
</div>
10-
)
11-
}
3+
export default class {
4+
render(){
5+
return (
6+
<div> <h1>Hello from repo Comp</h1>
7+
<h2>{this.props.params.repoName}</h2>
8+
<h2>{this.props.params.userName}</h2>
9+
</div>
10+
);
11+
}
1212
}
13-
export default app ;
13+

‎Section-04 -React.js Fundamentals with ES6 & Web pack/ES6 Webpack React Router/lessons/07-more-nesting/webpack.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
var port = process.env.PORT || 8080;
12
module.exports = {
23
entry: './index.js',
34

@@ -10,5 +11,11 @@ module.exports = {
1011
loaders: [
1112
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
1213
]
14+
},
15+
devServer: {
16+
inline: true,
17+
contentBase: './',
18+
port: port
1319
}
1420
}
21+

‎Section-04 -React.js Fundamentals with ES6 & Web pack/ES6 Webpack React Router/lessons/09-index-links/index.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import Home from './modules/Home'
1010
render((
1111
<Router history={hashHistory}>
1212
<Route path="/" component={App}>
13-
<IndexRoute component={Home}/>
14-
<Route path="/repos" component={Repos}>
15-
<Route path="/repos/:userName/:repoName" component={Repo}/>
16-
</Route>
17-
<Route path="/about" component={About}/>
13+
<IndexRoute component={Home}/>
14+
<Route path="/repos" component={Repos}>
15+
<Route path="/repos/:userName/:repoName" component={Repo}/>
16+
</Route>
17+
<Route path="/about" component={About}/>
1818
</Route>
1919
</Router>
2020
), document.getElementById('app'))

‎Section-04 -React.js Fundamentals with ES6 & Web pack/React JS-ES6 YouTube App/ReduxCasts-28-video-selection/src/components/video_list_item.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22

3-
const VideoListItem = ({video, onVideoSelect}) => {
3+
const VideoListItem = (props) => {
44
const imageUrl = video.snippet.thumbnails.default.url;
55

66
return (
7-
<li onClick={() => onVideoSelect(video)} className="list-group-item">
7+
<li onClick={() => props.onVideoSelect(video)} className="list-group-item">
88
<div className="video-list media">
99
<div className="media-left">
1010
<img className="media-object" src={imageUrl} />

0 commit comments

Comments
 (0)