Level 3
I also miss the update on the React Series.. I like Vue but React is my main focus now =) @Jeffrey
Feb 8, 2016
6
Level 1
React series needs some love!
Any plans on updating the React series soon? The current one is a bit out of date, though it's fun looking for the answers I would love some more up to date content as I find Laracasts to be an excellent learning resource.
Mean while at it, are there any other good resources on React that could be interesting to checkout?
Level 1
Were you able to make it past minute 7 in lesson #8?
My app is compiled perfectly to the bundle.js and is referenced in the index.html-- but nothing show sup. And no errors in the console either.
js/app.js
import GistBox from './components/GistBox.js';
React.render(<GistBox />, document.body);
js/components/Gist.js
var Gist = React.createClass({
render: function(){
return (
<ul>
<li>{this.props.username}'s' last Gist if <a href={this.props.url}>here</a>.</li>
</ul>
);
}
});
export default Gist;
js/components/GistBox.js
import Gist from './Gist';
import GistAddForm from './GistAddForm';
var GistBox = React.createClass({
getInitialState: function() {
return {
gists: []
};
},
addGist: function(username){
var url = `https://api.github.com/users/${username}/gists`;
$.get(url, function(results) {
var username = results[0].owner.login;
var url = results[0].html_url;
var gists = this.state.gists.concat({username, url});
this.setState({ gists });
}.bind(this));
},
render: function() {
var newGist = function(gist){
return <Gist username={gist.username} url={gist.url} />
};
return (
<div>
<h1>GistBox</h1>
{ this.state.gists.map(newGist)}
<GistAddForm onAdd={this.addGist} />
</div>
);
}
});
export default GistBox;
js/GulpFile.js.js
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function(){
return browserify('js/app.js')
.transform(babelify, {presets: ["es2015", "react"]})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('js'));
});
gulp.task('watch', function() {
gulp.watch('**/*.js', ['browserify']);
});
js/components/GistAddForm.js
var GistAddForm = React.createClass({
getInitialState() {
return {
username: '',
};
},
onChange: function(e) {
this.setState({ username: e.target.value });
},
addGist: function(e) {
e.preventDefault();
this.props.onAdd(this.state.username);
this.setState({ username: '' });
},
render: function() {
return (
<div>
<form onSubmit={this.addGist} >
<input value={this.state.username} placeholder="Type a GitHub username..." onChange={this.onChange} />
<button>Fetch Gist</button>
</form>
</div>
);
}
});
export default GistAddForm;
index.html
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="App"></div>
<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/js" src="/react-practice-gist/js/bundle.js"></script>
</body>
</html>
Level 1
React kind of sucks because 70% of the tutorials are technologically out-of-date and the remaining 30% provide no insight into best practices, or they provide "old" best practices ("old" meaning they used it greater than 24 days ago)
1 like
Level 1
Vue is interesting but jobs = knowing angular or react. Nobody cares if you know vue.
Level 6
@arcomito I disagree, I know many employers that look for the fundamentals in people. They know that you can apply your skills to almost anything if you possess solid fundamentals in programming and specific programming languages. However, i agree with the React tutorials being out of date! I have bought Wes Bos' ReactJS series and it allowed me to develop my skills in ReactJS and specifically the workflow aspect of it.
Level 7
Vue is still unknown even if I really love it. +1 on React series update with webpack/laravel-mix
Please or to participate in this conversation.