Skip to content

Lifecycle methods #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
igorb3st wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Lifecycle methods #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3bf9df2
add react & jsx
maxfarseer Mar 5, 2016
68a97cc
add components, react devtools
maxfarseer Mar 5, 2016
2bdb8f9
fix link
maxfarseer Mar 5, 2016
e1ff10c
work with props
maxfarseer Mar 5, 2016
7942df2
if-else, ?, add css
maxfarseer Mar 7, 2016
9579864
fix readme link
maxfarseer Mar 7, 2016
48db8d9
add css, add Article component
maxfarseer Mar 7, 2016
1d25cd1
add PropTypes
maxfarseer Mar 7, 2016
788df4d
add state and clickHandler
maxfarseer Mar 7, 2016
be9cfb8
fix readme link
maxfarseer Mar 7, 2016
545a7c5
work with state deeper
maxfarseer Mar 8, 2016
b5eff73
add uncontrolled input
maxfarseer Mar 8, 2016
787760d
add focus to input
maxfarseer Mar 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# react-ru-tutorial
Код для раздела [Подготовка](https://maxfarseer.gitbooks.io/react-course-ru/content/chapter1.html)
Код для раздела [Жизненый цикл компонента](https://maxfarseer.gitbooks.io/react-course-ru/content/zhiznennii_tsikl_komponenta.html)
33 changes: 33 additions & 0 deletions css/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.none {
display: none !important;
}

body {
background: rgba(0, 102, 255, 0.38);
font-family: sans-serif;
}

p {
margin: 0 0 5px;
}

.article {
background: #FFF;
border: 1px solid rgba(0, 89, 181, 0.82);
width: 600px;
margin: 0 0 5px;
box-shadow: 2px 2px 5px -1px rgb(0, 81, 202);
padding: 3px 5px;
}

.news__author {
text-decoration: underline;
color: #007DDC;
}
.news__count {
margin: 10px 0 0 0;
display: block;
}
.test-input {
margin: 0 5px 5px 0;
}
8 changes: 7 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,14 @@
<html>
<head>
<title>React [RU] Tutorial</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div id="root">Привет, я #root</div>
<div id="root"></div>

<script src="js/react/react.js"></script>
<script src="js/react/react-dom.js"></script>
<script src="js/react/browser.min.js"></script>
<script type="text/babel" src="js/app.js"></script>
</body>
</html>
130 changes: 130 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
var my_news = [
{
author: 'Саша Печкин',
text: 'В четчерг, четвертого числа...',
bigText: 'в четыре с четвертью часа четыре чёрненьких чумазеньких чертёнка чертили чёрными чернилами чертёж.'
},
{
author: 'Просто Вася',
text: 'Считаю, что $ должен стоить 35 рублей!',
bigText: 'А евро 42!'
},
{
author: 'Гость',
text: 'Бесплатно. Скачать. Лучший сайт - http://localhost:3000',
bigText: 'На самом деле платно, просто нужно прочитать очень длинное лицензионное соглашение'
}
];

var Article = React.createClass({
propTypes: {
data: React.PropTypes.shape({
author: React.PropTypes.string.isRequired,
text: React.PropTypes.string.isRequired,
bigText: React.PropTypes.string.isRequired
})
},
getInitialState: function() {
return {
visible: false
};
},
readmoreClick: function(e) {
e.preventDefault();
this.setState({visible: true});
},
render: function() {
var author = this.props.data.author,
text = this.props.data.text,
bigText = this.props.data.bigText,
visible = this.state.visible;

return (
<div className='article'>
<p className='news__author'>{author}:</p>
<p className='news__text'>{text}</p>
<a href="#"
onClick={this.readmoreClick}
className={'news__readmore ' + (visible ? 'none': '')}>
Подробнее
</a>
<p className={'news__big-text ' + (visible ? '': 'none')}>{bigText}</p>
</div>
)
}
});

var News = React.createClass({
propTypes: {
data: React.PropTypes.array.isRequired
},
getInitialState: function() {
return {
counter: 0
}
},
render: function() {
var data = this.props.data;
var newsTemplate;

if (data.length > 0) {
newsTemplate = data.map(function(item, index) {
return (
<div key={index}>
<Article data={item} />
</div>
)
})
} else {
newsTemplate = <p>К сожалению новостей нет</p>
}

return (
<div className='news'>
{newsTemplate}
<strong
className={'news__count ' + (data.length > 0 ? '':'none') }>Всего новостей: {data.length}</strong>
</div>
);
}
});

var TestInput = React.createClass({
componentDidMount: function() {
ReactDOM.findDOMNode(this.refs.myTestInput).focus();
},
onBtnClickHandler: function() {
console.log(this.refs);
alert(ReactDOM.findDOMNode(this.refs.myTestInput).value);
},
render: function() {
return (
<div>
<input
className='test-input'
defaultValue=''
placeholder='введите значение'
ref='myTestInput'
/>
<button onClick={this.onBtnClickHandler} ref='alert_button'>Показать alert</button>
</div>
);
}
});

var App = React.createClass({
render: function() {
return (
<div className='app'>
<h3>Новости</h3>
<TestInput />
<News data={my_news} />
</div>
);
}
});

ReactDOM.render(
<App />,
document.getElementById('root')
);
44 changes: 44 additions & 0 deletions js/react/browser.min.js
View file
Open in desktop

Large diffs are not rendered by default.