What is Reddit's opinion of
Egghead?
From 3.5 billion Reddit comments
➔ Egghead website
By popularity on Reddit, this Service is:
100 reviews of this app found across Reddit:
To me learning redux from Dan Abramov himself was extremely useful, he goes through the whole thing from first principles and shows a lot of best practices along the way. I didn't just learn redux inside out but also a lot about javascript and functional programming, I really can't praise it highly enough
Took me longer to learn than i’d like to admit. Personal tip: Learn and understand redux independent of React, then learn to incorporate it into React. Especially if you’re new to React. Dan Abramov, creator of redux, has a great and thorough tutorial
The official GitHub guide is a pretty good starting point, as is this guide on egghead.io. Make sure you're very familiar with Git (the add-commit-push cycle, branching etc.) and GitHub (pull requests, issues etc.).
Usually a good starting point is to work on an existing issue, although creating your own issue isn't a bad idea if it's a relevant one. Some projects use other issue trackers than GitHub (like Jira, YouTrack, Bugzilla) so make sure you know your way around the project.
On that note, make sure you understand the project's workflow. A lot of projects use the git-flow model, it's worth some research. Your pull request is far more likely to be accepted if it's in line with how the maintainers themselves work.
On "how to get skilled enough" - you're skilled enough right now. GitHub is a very friendly place, and if your code isn't up to standard, you're likely to be guided in the right direction, or simply politely told that your changes might not be the best ideas. Project maintainers' GitHub profiles are their public CVs, so they're not going to be assholes to people who are just trying to help.
Find issues you think you can tackle, fork the project, and make your changes! If your PR isn't accepted, improve it or move on and try the next one! There's no shame in trying, and having an active GitHub profile is a great career booster.
Try redux. It is a simple library that focuses on classic FP techniques and is heavily used. There are egghead videos where the author (the great Dan Abramov) walks you through building it, and the reasoning behind it.
I'd highly suggest Egghead.io for learning Angular. https://egghead.io/series/angularjs-app-from-scratch-getting-started
This video series by LevelUp Tutorials should get you going nicely with Sass. https://www.youtube.com/playlist?list=PL2CB1F80266E986EA
I just purchased it, some of subscription services need to be redeemed before a deadline:
- DigitalOcean $50 credit Must be redeemed before August 1st, 2018
- Postman Pro Must be redeemed before May 17th, 2019
- PyCharm Professional Edition 6 mos Must be redeemed before August 9th, 2018
- GitKraken Pro Must be redeemed before June 15th, 2018
The egghead.io sub (one of the main reasons I bought the bundle) doesn't have a redemption time limit. Nothing else except for those noted above either.
Hope this helps!
The Egghead Kent C Dodds React course is great. It’s very modern(based in hooks) and is only 2 and a half hours long. Would recommend watching that and messing around with a project to learn react!
Link to the course here: https://egghead.io/courses/the-beginner-s-guide-to-react
Array.prototype.reduce is REALLY powerful. You can write a lot of things in terms of it, things you wouldn't think of immediately. As a start, I would read more about it (MDN is a great resource) as well as the other array methods. My advice would be to study those in-depth, and maybe even try some practice problems and limit yourself to never use a "for" loop.
My team at work has a relatively large (8000 lines or so, including tests) front-end project and last time I checked we didn't have a single "for" loop.
Another great resource (free) is one you may have heard of before: YDKJS. It's a book series that is free to read online, and it wasn't until reading through those that I really understood JavaScript deeply.
For the array stuff specifically, there's a nice course on egghead about arrays (https://egghead.io/courses/javascript-arrays-in-depth) and one specifically about reduce (https://egghead.io/courses/reduce-data-with-javascript).
> drop between two different lists/source
Yep! The best place to start with the project is our free egghead.io course. In the course I guide you through building a Trello like task application - which includes moving items between lists
The best is to scope what you want to learn to not fall into frustration with the big amount of choice regarding frameworks and tooling plus all the new language features coming in via ES6/7.
Try to identify, if you went back on track, what will be the tools you'll need to use. I personally would prioritise this set:
- ES6
- React
- Redux
- Webpack
- SASS / BEM
IMO the above combination gives one of the best experiences right now in the font-end and many employers are looking for that specific skill set. Getting familiar with NodeJS will be good too, but NodeJS is pretty quick to pick-up if you have a good base in JS.
If you were writing jQuery plugins and advanced VanillaJS , that should act as a really good base.
I personally consume a lot of tutorials from frontendmasters and egghead.io, they are really well-structured and high quality.
I also suggest understand and interiorize what makes a well-balanced development team and look for that during job interviews. That's capital if you want to grow as an engineer, as there's no better way to get up to speed via mentorship of more experienced developers.
Finally, maybe the best advice I can give you is to be open-minded, in the front-end is not too long till you feel like a beginner again, things move really fast. Even the more talented people I met in my career make stupid errors, so don't be afraid to be wrong or ask questions. Keep that as your core and with a bit of patience, you will be up and running in no time!
The Egghead page says "last updated 9 months ago", and you can see it specifically covers React hooks:
https://egghead.io/courses/the-beginner-s-guide-to-react
You should also check out the new React beta docs as well:
I think it's a really good first step that you've decided you want to improve.
The MEAN stack is not necessarily the best combination for every job, as /u/r_park wrote there is a lot of churn and you need a solid base of understanding js and the available tools to make good decisions.
Since you've mentioned knowledge of SQL databases Postgres or MySQL could be an alternative for MongoDB. Angular (1.x) doesn't have the greatest of learning curves (2.x is probably something similar experience), alternative here could be React (+ its ecosystem).
For refreshing js knowledge (and understanding OOP better) Codecademy course is pretty good. For ES6, Node, Angular 1/2, React I'd suggest giving egghead.io a try.
I'll give a shout out to Kent C. Dodds' excellent The Beginner's Guide to React. It goes over the basics in short videos, and progressively builds up a great fundamental understanding of the problems that React is built to solve.
egghead.io also has a large amount of free react courses - in the format I like screencasts to be...very fast and concise.
When I was starting out with Redux and testing react apps I found the tutorials to be very helpful, not sure how good the entry-level course is...but Kent Dodds is a good instructor.
Oh also, Egghead has a few videos to get started on it, eg: https://egghead.io/lessons/react-react-motion-introduction-to-the-spring-component
And Cheng Lou (who created the library and works on Messenger at Facebook) did an awesome presentation on it at React Europe: https://www.youtube.com/watch?v=1tavDv5hXpo
-Brent
React mostly runs on a single API function, a couple of component lifecycle-methods, JSX is just extended HTML. The rest is common Javascript. The semantics you grasp under an hour. With React it isn't the framework that's a barrier, it's the effort to learn ES6/7. And with it build-systems like Webpack, though that's been made easy.
Vue is generally abstracted, magic and often arbitrary. It is inherently more complex due to a large API surface, code-in-HTML templating syntax, Vue's nested instance semantics, observable gotchas, ES5 workarounds and a documentation that is absolutely vital to read and understand. I know i needed a good while to get to the point where i wouldn't need to consult docs or Vue forums.
I thought this one was pretty good for covering the basics, and it's free:
https://www.codeschool.com/courses/shaping-up-with-angular-js
Egghead.io has a ton of content as well for free (not all of it is free, mind you), but it's not very well-structured, so it can be a little less rewarding. But this small set is pretty coherent:
https://egghead.io/series/angularjs-app-from-scratch-getting-started
React is easy. Just look at the docs, they are good enough. If you understand JavaScript and have been programming for 20yrs, it shouldn't be much of a stretch. You should be good in a few days. It's incredibly straightforward and just has a few gotchas that are minor hurdles. If you need a bit more help, CodeSchool is amazing as always.
Learning data flow and getting your brain to work that way might be a bit tougher. This Redux series by Dan Abramov is pretty good, but not entirely free. Their docs are pretty good too. Redux itself is pretty easy too, but has some boilerplate, and takes a little brain rewiring. (for me it did, at least)
I can personally vouch for Ryan Florance's course on Frontend Masters.
I would also recommend Dan Abramov's Redux course on egghead.io.
Dan and Ryan know what's up. (although I prefer browserify to webpack)
You have logic in your HTML with Vue, i mean literally. Without it you wouldn't have dynamic components. The view and the code that forms it both belong to the same presentational layer, they are one. React just doesn't create artificial separations there.
You see, we've been fighting with templates ever since Knockout and Angular1 were around (and it goes further back, too), and they are in part to blame for the complexity that frameworks cause. And Vue isn't an exception: creating a limited coding pseudo-language isn't making things easier on the developers side, they didn't use javascript because the separations they were constrained to didn't allow it. The same goes for everything else: templates aren't ripped from scope--depending on DI, because it's so convenient, rather they had no other choice. They didn't like that you had to register components in order to use them in other components, but a string template just doesn't have real references.
When React came about all of these problems were solved and it made writing applications easier than before. This is the reason why React is where it is today. This isn't due to ignorance of Vues virtues, people are well aware of what it does.
If you want to get a different perspective, try this out: https://egghead.io/courses/react-fundamentals
I really enjoyed this quick redux course by the creator himself: https://egghead.io/courses/getting-started-with-redux
Don't have anything more substantial however, more of a learning-by-doing kind of guy.
From Dan Abramov himself, It goes into most of your questions, like persisting data: https://egghead.io/courses/getting-started-with-redux
https://egghead.io/courses/building-react-applications-with-idiomatic-redux
Redux is just a state container. It holds the data that is needed to make your app function, be it logical and/or presentational data. That data could come from a database.
Think back of the "very simple" times where dozens of ajax connectors blew data into views, how hard it was to orchestrate or compose data-flow, near impossible to reason about how your app just did that, all the flags, switches, fallbacks and hacks to cope with the complexity of views affecting other views, state sprinkled all over in dozens of places: if view1.btn.pressed && view2.text == hello || view3.canceled && view4.refreshed then ...
This all vanishes in a puff of smoke with Redux.
As for Node, you use Redux there as well. You can use it anywhere, if state is involved. React-redux are just bindings that connect React components to your state. Such bindings exist for most frameworks not just React.
"Things like scaling, load balancing, reverse proxies, AWS services". Sounds like you know development and want at better understanding of staging, operations and hosting.
DevOps combines the both. For a JS guy, here's 90 minutes of pure gold to get you going: https://egghead.io/courses/how-to-write-an-open-source-javascript-library
- Pass from parent to child, from child to grand-child, from grand-child to grand-grand child.
or
- Convert one of the children into a container and pass it as close to the final component as you want (https://egghead.io/lessons/javascript-redux-extracting-container-components-filterlink?series=getting-started-with-redux)
None! Udemy doesn't care about copyright. It would be more ethical to torrent stuff than to buy them from Udemy.
You can find some alternative there (some for free): https://github.com/enaqx/awesome-react#video-tutorials
This is still my fav: https://egghead.io/series/react-fundamentals
I loved it when I was working full time in that environment, and it's almost certain that the new TypeScript website will be built that way.
Best starter recommendations are:
There's the react-app-rewired utility which is perfect for this. You can configure CRA without ejecting, by customizing the webpack config with a function you write. (if you have an Egghead subscription I made a video on how to set it up here)
Redux has been relatively stable. Check out the egghead.io course from it's creator:
https://egghead.io/courses/getting-started-with-redux
It's the defacto library that most react shops use for data stores.
Probably react for all the points you've listed.
It is easy to learn, i didn't need more than an hour. Egghead was my starting point. React has a tiny api surface, documentation is not needed for the most part once you understood the gist of it. It's simple to use and maintain as well. It has real components that you can compose freely. Long term is guaranteed because its principles do not age. It did not change over the last few years except minor deprecations, its interface (createElement) will never change. The foundation is strong enough that most if not all react-like competitors can (or could) share components and tools. You can switch to compatible frameworks with an alias (like switching to preact in the prodcution build: and react shrinks to 3kb). It's the most widely used framework today and is rapidly conquering other platforms as well.
>Which sites are the best.
Like all things computer related, there is no single best. It all depends on the language/framework you are trying to learn. Likewise in the industry asking "what's the best framework?" leads to "well what do you want to do?".
In terms of learning (especially filling out industry skills vs academia) I'd recommend:
Pluralsight . They have an insane amount of courses from some of the best senior devs/software architects in the industry.
Code School has some really neat cutting edge content and it's a lot of fun.
Egghead has a some great videos pertaining to front end technologies.
I loved AngularJS when it first came out, and have been using it for over a year and a half now - but just this week I switched to React because angular just isn't good when it comes to more than 2000 scope watchers (which is very easy to do). Angular is also in desperate need of something similar to React's shouldComponentUpdate feature which at the moment seems tedious without hacking into Angular's abstraction layer ($50 BOUNTY FOR A DIRECTIVE WITH AN ATTRIBUTE THAT TOGGLES WATCHERS NICELY!!!!1).
I originally decided to make my switch to React after my frustration of a creating a fast multi-selectable ng-repeat list (about 200 items), my problem was this ng-repeat was creating ~10K watchers and bringing my whole apps user input responsiveness to the shitter. I couldn't use solutions like the bindonce directive because I needed two-way data binding, and I couldn't find a virtual scrolling directive that disabled watchers of hidden elements. React can handle a 5k data-binded components without fault.
I recommend you try React on future projects, I wish I did.
Got to get back to porting my Angular apps to React,
latez.
/rant
Learn fast: https://egghead.io/technologies/react
EDIT: spelling and grandma
Angular has a pretty steep learning curve (especially if it's your first JS framework) but start here: http://www.thinkster.io/pick/GtaQ0oMGIl/
https://egghead.io is also a great resource (and it's linked in the above link as well).
You mean you've worked through the tutorials on the redux docs site and the redux-toolkit docs site, but that has not been sufficient?
There's a free course on egghead.io, but I don't think it gets any better than the docs.
Not OP, but offer free tutorials or other proofs of work as a sample and let the user decide if your content warrants spending the time to sign up or pay. Or free up a section of the tutorial and lock the remainder until sign-in/payment.
The annoying thing with the posted example, at least for me, is the fact that this post is presented as if this is the author's personal site and he's locking a tutorial away for the sake of it, when in actuality, this is from an egghead.io course which is both a free and paid service. They require sign-ups site-wide, it's not like this author decided to be ridiculous and lock a simple react component tutorial away to increase conversion. You can find the lesson in question here. What isn't shown is the video that walks through all this above the section that was posted. The video is free and accessible without signing up, you just can't copy and paste the code without an account. Seems fair to me, really.
React is not a framework, there mostly is nothing to learn if you know a little javascript, and you can pick it up fully under an hour. This isn't like Angular or Vue, where you have to learn how to do stuff their way, with gigantic api's and arbitrary constructs. Try this for instance: https://egghead.io/courses/react-fundamentals You'll quickly realize why people are liking it.
It revolves around the basic premise that views are functions of state, which isn't a flavour of the month but a paradigm. Jquery for instance follows layout-inflating, which is the most troublesome and complex because you are mutating and abusing the dom by dropping state into it. This paradigm was long cast aside for MVC and MVVM. The web was one of the last platforms using inflating. MVCs OOP controllers lasted for nearly a decade, and they were a major step up but still had other issues that made applications hard, primarily templates. We're now just crossing into the next paradigm, by casting templates aside in favour of declarative functions.
React doesn't matter, maybe it's something else tomorrow, but the concept that drives it will go on - and you can already see it, even native platforms are equipping themselves - though probably in vain as react has a good chance to drive them as well since it's fully cross platform.
It is possible. I wasn't a beginner, i had prior knowledge of frameworks and build-systems in general, but it took no more than an hour of this: https://egghead.io/courses/react-fundamentals and i felt like i could run and build apps - without consulting docs. Even if you haven't worked with build-tools before, create-react-app takes care of that. The only thing that is critical is a good grasp of javascript (especially es6 and up), if you have that React is trivial to learn.
Of course React in the real world is bigger than just the view-layer as you'll undoubtedly bump into routers, state-managers, and so on. But that will come after.
Look at usage stats, that's pretty much all you need to know: https://npmcharts.com/compare/react,angular,@angular/core,ember-cli,vue,@cycle/run,@polymer/polymer
There's a reason for how it's fallen into place. Angular was amazing but it did struggle with issues that couldn't be resolved due to its roots. Vue is a polished Angular on the outside but inherits the same oop/mvc/di bulk. React is more of a newer paradigm, it fixes most of the problems older stacks had and it does it in a way that is radically different, though elegant. That paradigm will last for a while, even if frameworks change they will use these principles for years to come. Most frameworks today are React derivatives, even Vue is React underneath.
In itself React is simple to learn and use, learning it is a matter of an hour maybe, its api surface fits the palm of your hand. It is forward thinking (see Fiber, Reacts upcoming release) and allows you to write applications natively everywhere. It is the only framework that is seeing industry adoption outside of the web. Microsoft for instance has adopted it, Androids Kotlin is borrowing from it, and there are many others.
No offense but all I hear are excuses, almost as if you're trying to make up excuses in advance so that when you fail you're not as demoralized. If you want a change, then you have to try to make a change. Clearly something is not working while you stay in your comfort zone so you have to get outside it and actively make a change. When you say "I'm not sure where to look for open source projects either," you have the internet https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github
https://www.quora.com/How-do-I-start-contributing-in-Open-Source-projects. You can't just expect something to land in your lap, you have to work for it. Also working on a company's open source projects often looks attractive to the company. Honestly, I'm a little heated looking at your past post history as I feel like you're self depreciating yourself and talking about making a change, but not enacting the actions necessary for the change. Also for resumes, it is mostly helpful to look at other people's resumes and good ones to see what they are doing right.
No one can help you if you're "unsure" of what you should look for and afraid of the time it will take. You know yourself the best.
I mean this sincerely, but not everyone is meant to be developer. People have romanticized dropping out of high school and getting a 6 figure job in software engineering, but those people are driven and know what they are doing (One person from my high school did this and he had a choice between great colleges and working full time, he chose the latter). Just because you majored in CS doesn't mean you have to stick with it as your career.
I recommend you use create-react-app to get started. https://github.com/facebookincubator/create-react-app. This avoids having to setup webpack, babel and all that other stuff so you can focus on react.
Then follow the egghead react course at https://egghead.io/courses/react-fundamentals
Watching Dan Abramov's first talk on redux and completing the egghead.io “Getting Started with Redux” course made me understand and fall in love with redux.
Look at Egghead.io and Front End Masters. The people teaching the classes on these services are leaders in their field. For example, the Redux class on Egghead is taught by the creator of Redux. Frontend Master's has courses from the author of You Don't Know JS (Kyle Simpson), Douglas Crockford, Henrik Joretag and others. It's super legit.
The JSX syntax itself has VERY little to do with what makes React great, and proper React is actually highly structured and not at all messy.
https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a#.a0z35rz2k
To me, it looks nice when used as callbacks with very little code. But I often see them used as full block functions like this:
const someFunction = (state, opts) => { // function body // return "something"; };
You can see it here, for example.
I think a "normal" function should be used in a case like this one. Because not much typing is saved here, and to me, typing => is much less convenient than typing the word function (but of course, text editor snippets can take care of that... I just want to know that their use is justified).
A lot of CS courses in 3rd level cover a broad range of topics in the 1st year to give new people a chance to see what parts suit them best. Do you have an idea of what part might be of particular interest to you?
Try some of these resources in your spare time if you want to get an introduction to the area. Im not affiliated with any of them but have found their free stuff useful in the past!
Scrimba - Nice video/editor component
Egghead - Broad Range of Stuff
Best of luck with it anyways, it's a really rewarding area once you get into it.
It depends on what medium you get the most out of. I personally think physical books is just blah for retaining information. If you enjoy videos and get a lot from them, I would highly recommend one of the online video subscriptions. If you are really wanting to learn the front end side of things, an egghead.io or front end masters subscription are very much worth the money. Egghead is super short, straight to the point videos. FEM is more workshop-ish, and usually dives into the why/how/theoretical side of things. Pluralsight is also great.
There's also lots of free content out there too :). Don't think you have to spend money in order to get 'continued learning'
...and for the intermediate/advanced level, my favorite is egghead.io.
For total beginners, I absolutely recommend their “Practical Git for Everyday Personal Use”. It’s a game-changing life-skill for any time you’re working with text-files (html, css, JavaScript, notes to self, JSON, Markdown, etc. - most things you would work with that aren’t pictures or Word documents.)
This book, The Road to Learn React by Robin Wieruch, helped me a lot. He explains the concepts clearly( check out his blog). You get a good overview and hands on coding: https://leanpub.com/the-road-to-learn-react
If you prefer videos, here's the The Beginner's Guide to React by Kent C. Dodds: https://egghead.io/courses/the-beginner-s-guide-to-react
Have you worked through Building React Applications with Idiomatic Redux by Dan Abramov? It's a great course straight from the horse's mouth!
W3Schools is outdated horseshit. They dominate google rankings and pretend to be related to the web standards board but they aren't. Stay away from that. Here are some pretty good resources.
I'm a big fan of create-react-app myself, mostly because it comes with 99% of the important stuff out of the box. For the remaining 1% the official advice is "eject!", but if you're savvy with a Webpack config you can customize CRA. I made an Egghead lesson recently about how to use react-app-rewired to modify CRA's Webpack config - if you have an Egghead subscription you can watch it here - otherwise just follow the readme at react-app-rewired and you'll be well on your way.
> I'm unfamiliar with any framework, though I gather Angular and jQ do not play well together. What do you recommend?
Even though you most certainly could, you would not want use JQ with any framework, they're different paradigms. JQ inflates layout imperatively, frameworks are often of a declarative nature, that makes handling UI, state and data-flow easier and JQ can move out completely.
I wold recommend egghead as a starting point: https://egghead.io/courses/react-fundamentals Their React course shows you all the basics you'll bump into, like npm, webpack, babel, modules before going into React itself, which is probably the easiest to get into but at the same time the one that is used by most.
Check out cycle.js . Andre Staltz has a great egghead course that walks through his motivation of the library and shows you how to build with it. It leveraged streams (not rxjs) heavily.
Learning is never a mistake. If your employer think you are not able to do Redux because you "only" know MobX, then I would recommend not to work there (except if you really need it).
You can take a look on Dan Abramov's video series to understand it better in a easy way. He makes you re-implement redux from scratch in baby steps: https://egghead.io/courses/getting-started-with-redux
Also may help: there are libraries on top of Redux that helps you understand and reduce boilerplate. I personally like this one: https://github.com/Emilios1995/redux-create-module
And try to learn always. Learn new languages, new paradigms, new patterns. It will always make you a better programmer.
I'm following the outline of tutorial (https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript). I've tried to make it clear that JavaScripters go through his tutorials first so that they understand the abstractions in the comfort of JavaScript before tackling them in PureScript.
In video 1, function composition is covered, followed by the Identity functor (calling it Box in order not to scare anyone). The Box object includes map, inspect, and fold: f => f(x). I felt that the Comonad was the best approach to tackling his version of fold, though not exactly a one-for-one translation.
That said I'm very open to pull requests. I want these tutorials to make a positive contribution to the PS community.
I would suggest reading over the basics in the docs and then looking at the TodoList example (http://redux.js.org/docs/basics/ExampleTodoList.html)
If you need to watch someone actually implement it and explain it, I would highly suggest egghead -https://egghead.io/courses/getting-started-with-redux
It took a few weeks to wrap my head around redux, which is surprising, because once it 'clicked' it was actually incredibly straightforward and so useful. I realized that part of the learning curve wasn't necessarily an issue with redux on it's own, but understanding how it relates to react, and what it's actually solving.
Soon into building my first react application i encountered an architectural problem; if each component handles it's own state, how do you go about changing it's state outside of the component itself.. It gets ugly very quickly when you're changing things through props and trying to push changes both down and up the component tree.
What redux does is puts your entire application state into one object tree, at the very top of your application, and any change to this state happens in a unidirectional flow.. going from the action (a button), to reducer (formatting / middleware (fetch requests)), to store, and then down to the components.
Your components then listen to any state change happening at the top level. While Redux is completely independent of React, it's a much needed pattern for React applications.
This video series has been posted all over, but if you haven't watched it yet I highly recommend checking it out. I had to watch the first half of the videos several times to get it. https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree?course=getting-started-with-redux
I was late to the Flux party and went straight into learning Redux. It is considered "Reducer + Flux". This means that all actions that happen in different components are submitted to a reducer which updates the global store. Your component that needs to change because of this is receiving the global store as props and changes accordingly.
The tutorial link above has caught on like fire around the community. Then it is easy to implement Redux-devtools to code with "time-traveling" so you can see how state changes are affecting your app.
I have just been doing this recently, I would recommend you first focus on getting Redux + React setup in the way you want and as a separate application. To start with you should ignore the database backed side of things, just using mock data where needed.
There is a lot of tools for React available so getting your environment setup can take time itself, personally I followed bits from this guide to get React + Webpack + Babel + Hot Loading (livereload) setup.
Next I'd recommend watching Dan Abramov's introduction to Redux, to get to grips with Redux and implement it in your project. It is worth watching through all 30 videos before integrating it with your project.
Finally you can setup a Rails project which will just serve as an API, then simply integrate your Redux reducers to use the Rails API endpoints that you have created, adjusting the data returns/manipulation as necessary.
Edit: Everything I've suggested is to help make separate React and Rails applications as I believe this is the best method to go down. If you did want to go down a different path (i.e. intregrating React with Rails) then you need to state that but also you shouldn't have a problem finding tutorials on Google for those other methods.
I highly recommend watching Dan Abramov's free video explanation of how redux works. It's like thirty videos, a couple of minutes each and covers some of your questions: https://egghead.io/series/getting-started-with-redux
There's nothing in Redux itself stopping you from using Redux in ES5 or even ES3 (i.e. MSIE8). If you check out the free series on egghead.io by Redux's creator you'll see that there's nothing ES6-specific about the implementation of Redux itself either.
The reason Redux examples and in fact a lot of recent code examples in JS use ES6 syntax (or in some cases even proposed syntax like object destructuring) is that it is less verbose, takes care of some common problems without introducing unnecessary abstractions or dependencies, and (with the exception of proposed features not covered by ES6) it's not "the future of JS" but what the language is actually supposed to look like today according to the most recent spec.
But as others have said, you can even write ES6 code and convert it to the ES5 (and in many cases even ES3) equivalent using Babel (or TypeScript if you use Angular2). If you're writing code for the browser, you can easily do this as part of your bundle/minify step.
Here's a good description of one of the techniques I use:
https://egghead.io/lessons/nodejs-creating-demo-apis-with-json-server
It handles HTTP GET, POST, PUT, and DELETE, and also supports CORS. It's a very easy way to get a realistic API up and running quickly.
Rather than subscribing, you should look into using switchMap or mergeMap (known as ”higher order observables” via pipe. Ideally, you should very rarely be subscribing to your observables at all; rather, you should be unwrapping them via the async pipe in the template. If you have an egghead.io subscription, I highly recommend André Staltz’s RxJS courses. This stuff hard learn, but worth your time. He has a whole course on higher order observables.
I was awarded a small scholarship for FlatIron school. It was about two years ago, so take this with a grain of salt, but I really wasn't impressed at all. The "lessons" (if you could even call them that) felt like they were half-finished. The 'tutors' were just students that had graduated but couldn't find a real job. I ended up leaving after about a month and a half because it felt like a scam.
​
Honestly I feel like a membership to a good educational library like egghead.io or frontendmasters.com, plus something like freecodecamp.com (and getting heavily involved in that community), plus finding/paying someone to mentor you one-on-one for a couple hours a week is just as good as 90% of bootcamps out there. It will also save you a bunch of money.
I may have missed something (on mobile, didn’t paste into a code editor), but I didn’t see where you defined the variables for your buttons & other elements. You can’t just <input id=“example” /> and expect to have an example variable automatically in your code. You’d need at least const updateButton = document.getElementById(‘updateButton’) if you’re not using another method to find elements (like jQuery or react)
Also, not to be That Guy, but I’m totally going to be that guy for a second:
You miiiiight want to consider using a component framework like React or Vue for this (create-react-app is pretty nice). It can help give your code more structure/reusabity/testability, and I’ve found both libraries very helpful in my own work.
The free Beginner’s Guide to React course at egghead.io is excellent, and taught me things about modern-JavaScript-in-general.
One potential solution could be to give a talk at work on React basics (maybe using this course as a template).
I've found that giving talks at work helps people respect your opinion on a particular subject, especially if you have fewer years of general programming experience. A "React fundamentals" talk would give your coworkers an overview of the basics and maybe help them separate core React features from things added by react-boilerplate, which could contribute to them thinking that things are "too complicated".
As others have mentioned, it might be worth exploring TypeScript. My personal recommendation would be to try to stick with vanilla React/JavaScript for a little bit and try to establish some authority first, and maybe float the idea of TypeScript later if you're still unsuccessful in changing anyone's mind.
That's why I mentioned Egghead.io in my initial post. If videos are concise and cutting, lasting no more than a few minutes, it doesn't have to be painful. Every word and sentence should count. I'm no fan of JS but once you've seen Egghead's videos you realize what a professionally done, well-crafted video course looks like.
Save the state to localStorage and check whether it's available next visit - if so rehydrate. Typically use Redux when doing so but you can use component-level state as well. Dan has a good video on EggHead about it: https://egghead.io/lessons/javascript-redux-persisting-the-state-to-the-local-storage
Edit - sorry just seen you meant when navigating from the filter itself, not leaving the session. Redux again is ideal for this as it creates a central store that will persist during a session. So if your users adds some filters, these would be saved to the store, then even if they navigate away from the page and come back the state is still available as it was left. Again recommend watching Dan's videos on EggHead for info.
You have a html file, it contains a bunch of nodes, you fish out some container with ids or tags, then append your own nodes that are mashed together in code, when something should trigger an update you have to remove old nodes again and remember all the places where updates should happen, usually you update plain everything because it gets harder if you want to update only the parts that ought to. State is generally kept inside the dom as class name "toggled, loggedIn, ..." or as non-reactive globals. The complexity of it all just keeps increasing until you reach a point where you're lost in a see of implicit wires and assumptions everywhere. Not the smallest bit is re-usable, everything is tied to specific conditions, there are no components in sight. It is called layout-inflating, and it is one of the oldest and most troublesome paradigms that we have.
BTW Mitchellangeloo is correct, Angular is overkill. React on the other hand is not a framework, it's a small javascript centric viewlayer. It can be learned under an hour. The example above is a react component.
You should skip coffeescript. No company will expect you to know it, and it is becoming increasingly rare in usage. Also it is difficult to debug problems if you don't understand the javascript that it eventually compiles to.
Typescript is becoming increasingly popular but it is also far and away not as common as javascript. Also, it is a superset of javascript (javascript + extra features), so if you are learning javascript, then you are well on your way to learning typescript and can explore it in greater depth later.
Focus on javascript. It will have the most learning resources (blogs, books, etc...), the most tooling / support, and the most job opportunities. You can play around with it at any time just by opening the inspector, so the setup barrier is extremely low.
I recommend going on Frontend Masters or Egghead.io and watching videos on javascript fundamentals. Then pick a framework and start learning it. Vue.js is probably a good one if you are a big fan of html templates. It's also pretty opinionated about project structure so you can get pretty far without having to make a lot of decisions about every little bit of the project.
https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript
If the voice doesn't drive you insane here is a video series produced by the author of the mostly adequate guide.
I'm not sure how much experience you have, but I would start with the React docs and this course on Egghead.
I think it's important to have a fundamental understanding of React before moving on to resources that include things like redux and react-router and complicated build systems, none of which are necessary to use with React.
> I wonder how much time it will take to learn reactjs, before I actually can code everything in react.
An hour: https://egghead.io/courses/start-learning-react
There’s obviously more to learn when it comes to es6, modules and bundling, but the course will give you enough to run with it and start writing things.
The following courses are very good:
https://courses.reacttraining.com/p/advanced-react
https://egghead.io/courses/advanced-react-component-patterns
You can watch the main lectures from the first course for free at https://courses.reacttraining.com/p/advanced-react-free but it's worth paying the $199 for the other content.
If you haven't already, I recommend checking out Dan Abramov's Egghead.io tutorial about Redux. It's extremely good, and it comes directly from the library's author.
https://egghead.io/courses/getting-started-with-redux
My ELI5 version might be:
Actions are dispatched when something happens. Each piece of your state is controlled by a reducer. The reducer's job is to listen to all actions, wait for ones it cares about, and update its slice of state accordingly.
Every action passes through every reducer.
tyler mcginnis (may be paid subscription now)
Then I do lots of reading to keep up with the best coding practices. This sub has lots of great resources being posted.
I also recommend learning by doing. Create a portfolio page or something in React to really improve.
It's a bit dry, but nonetheless worth it, made by reduxes creator Dan Abramov: https://egghead.io/courses/getting-started-with-redux
Redux is based on the flux pattern, shrinking the already very explicit structure a little. Redux has become the go to approach for flux.
As others have stated. Tell your CEO that you need to hire a FE dev. Even tough this is a start up you shouldn't have to put up with this amount of pressure.
If you're still interested in learning more about FE, check out this curated list: http://superherojs.com. Pick and choose a few things to read/watch from each section and you'll be golden.
To compliment Superhero.js, check out https://egghead.io. They have a lot of series on React and other things. Many videos requires a subscription, which your company obviously should pay for.
You might like Dan Abramov's Getting Started With Redux course on egghead.io - it's free, and he's the creator of Redux so he knows what he's talking about :)
Redux is, basically, a big global state. You "connect" your components to that state to pull out the specific pieces they need.
The reason it's complicated is to keep it immutable, and the reason for THAT is to make your app easier to debug. Every change to state must go through proper channels, so it's easy to figure out which piece of code changed state and when. Check out the Redux Devtools gif to see why this is awesome :) It's like a breadcrumb trail of everything your app has done.
I wouldn't take the chance, even if React has been quite api stable. There have been minor deprecations like createClass and maybe the mix-in pattern. Also courses that start with script tags and createElement because build tool hysteria, ain't nobody got time for that.
Egghead updates theirs lessons every now and then, i thought that's pretty considerate. I learned React with this one. That's about an hour and you know React.
If you want to understand Redux in depth watch through this: https://egghead.io/courses/getting-started-with-redux
It's from the Dan Abramov (creator of Redux). He basically assembles Redux from scratch piece by peace, goes through the various stages of notifying components, like calling subscribe and forceUpdate, until arriving at context propagation through a self-made provider container. In the end he wraps up and you see that react-redux is doing all this for free. It can be a little dry, but i haven't seen a better learning resource.
I used the official docs when I learned: http://redux.js.org/docs/basics/
If you are learning better from videos I would recommend this video course by the founder of Redux https://egghead.io/courses/getting-started-with-redux
Good luck!
Modern frameworks are functional, which makes it very easy to supply it with data. The basic principle is: input > component > UI. This is how you make a simple component in React:
const Button = ({ color, children }) => <button style={{ color }}><{ children })</button>
You have a component now. If you call it you pass properties to it, just like a function:
<button color="red">hi there</button>
If you use a statemanager like Redux, you can "connect" any component to a portion of state. If that state changes, Redux will call your component with the updated props.
connect(state => ({ color: state.options.color }))(Button)
There, this injects "color" as a property if options.color changes in your statetree. Your Button renders.
You can also build stateful components that keep their local state, using es6 classes. You can connect these to Redux as well of course. In this example everything you type in the input will be presented in the span:
const Test extends Component { state = { text: "" } onChange = event => this.setState({ text: event target.value }) render () { return ( <div> <input value={this.state.text} onChange={this.onChange} /> <span>{this.state.text}</span> </div> ) } }
Just by looking at these examples you have learned 2/3s of React. Redux will be a little tougher to understand, but it's worth it. Here are some courses:
I can't recommend the official redux tutorial videos highly enough! It helped me understand React and learn Redux. Redux is essentially a modern state management micro-framework that's used in a lot of react applications once they hit a threshold of complexity but you can use it for very small apps too if you'd like.
edit: The tutorial videos are completely free. I think you might have to sign up for an egghead.io account but the redux course is free.
Watch the free Redux course taught by creator Dan Abramov, and follow along with the notes.
I'd highly recommend going through Dan Abramov's free (!) redux tutorial on egghead.io
This gives a really great intro to immutable programming. You'll see people talking about how great it is, and may be scratching your head as to why. Long story short, there's performance improvements, and it provides predictable state within the browser which can be a headache. It's definitely a different way of programming, and leads to more "functional" code (i.e. treating functions as first class citizens, heavy use of map / reduce, pure functions, etc.).
Given this knowledge, the world is your oyster. If you're a glutton for punishment, try to spin up your own webpack + react + redux project from scratch. That said, the major difference I've seen between angular (2) and react is angular is a full framework. React is just a view technology, it's on the developer to fill in the gaps, this is very powerful, but I don't need to quote Spock...do I?
tl;dr: Learn immutable programming, if you're a do it yourself-er, piece together a framework with react and the plethora of libraries out there. If you're a one size fits all person, learn Angular. Oh yeah, and learn TypeScript, it's amazing in an IDE.
Nice to see a React Native project using Redux in this subreddit.
By the way, when connecting your React component to Redux, and you just need to wrap your action creators with a dispatch call, you can simply pass an object containing the action creators. react-redux's connect() will wrap them for you. The keys in the object become the names of the action creators in the props.
In your PokeMap component, it could look like this:
const mapDispatchToProps = { refresh, updateUserLocation, onWildPokemon };
Or even shorter, just use an object literal when you call connect().
connect(mapStateToProps, { refresh, updateUserLocation, onWildPokemon })(PokeMap);
There's a very short video on this from Dan Abramov.
I think if you have a basic understanding of programming Sass shouldn't be too hard to learn.
Just look up the syntax and try some things for yourself like nesting, mixins, and using variables. Also, sass should be compiled to CSS, so you should find out what you would like to use for compiling.
Because you're willing to learn React it might also be a good idea to dive into ES6 and Node.JS, and then Gulp, which you can use for compiling your Sass :). (if don't want to use gulp take a look at Koala (free) or Codekit)
React might be a bit difficult at first, but once you get the hang of it, it shouldn't be too hard. It might be a good idea to take a look at the free video courses about React on egghead.io, I believe you do need to sign up first https://egghead.io/search?q=react
Youtube is also stuffed with great video tutorials about React. More importantly, keep practising and write some code yourself, it's the best way of learning new frameworks and languages!
Personal tip; once you get the hang of React, take a look at React Native (for building native apps like for example a IOS/Android app), and also Redux! You won't regret it.
I just started watching the "Getting Started with Redux" videos last night. This post is a great complement to this video: https://egghead.io/lessons/javascript-redux-implementing-store-from-scratch I really loved how simple the store object is ... it's very inspiring. I appreciate how your post went into details like why reducers are called reducers ... knowing that kind of background really helps with getting a good grasp on the concepts!
I personally have been using redux the last couple of weeks. It's been a nice experience so far. The docs are a nice starting point. You can also look at the video tutorials made by the redux creator himself: https://egghead.io/series/getting-started-with-redux
The environment, once set up correctly, is amazing. Webpack, Hot Module Replacement, react-hot-loader, all of these tools have sped up my development flow. They enable you to basically change a react component and once you save, have the changes pushed to the browser. This is without having to reload the browser. Your state stays the way it was too, so you don't have to go through the steps to get back to the state you were before.
I must say I'm not into React because I'm allergic do JavaScript — every time I start to use it productivity falls and I have bugs all over the place.
However I also must say that the tutorial from their official docs is a good start.
Next you might want to look after the architecture of your code and take a look in Redux, maybe starting with this video series.
>In most tutorials/examples, they use ReactDOM.render() in store.subscribe().
I don’t think we do? If you check the official examples, only a single example uses ReactDOM.render(), and it’s the most trivial one. Every other example uses connect() from React Redux because yes, it’s much faster.
Even the Egghead course on Redux ends on using connect(). Unfortunately many people seem to end the course in the middle and then use inefficient patterns. ¯_(ツ)_/¯
Mokaroo will generate random data.
You can then use json-server to create a fully restfull api.
I just found out about those two while reading the comments.
EDIT:
watching the egghead.io guide of json-server, they used a node package names faker to generate the data, looks awesome !
One of the articles that I found helpful when first starting to learn react is "Thinking in React" found in the official docs. This will be useful when thinking about how to compose (in other words "pick the parts") of your components. Don't read the parts about data flow though... you'll want to watch Dan Abramov's free Redux course for learning about data flow.
These videos will also teach you about components and React. I have made my notes available that go with each of the videos which may be helpful for you to read along with the videos.
I'd suggest viewing some of the tutorials on https://egghead.io/ as they answer this (and many more questions) in much more detail than anyone here is probably willing to do :)
Come back with specific questions, but the general "how do I organize an MV*" project question has been answered a million times.
My personal preference is React as the primary layer.
I used Egghead.io. They post short videos showing actual examples, and how they're built. Good if you're a visual learner. Since you're already familiar with Javascript, you mostly need to grasp the architecture of a React component, and later how to compose it into an app (most likely using some Flux derivative). Then you're good to go.
I recently went through these ones on Egghead.io:
https://egghead.io/series/react-fundamentals
https://egghead.io/series/react-flux-architecture
Not all of the videos are free, though, unfortunately.
There is no "right" path. There is no "right" framework. Have a look at the bigger ones and decide which fits best for your project.
There will be a talk about this topic at this years RailsConf. These screencasts are great. And of course the react getting started guide. and "thinking in react" on that page.
I'm not familiar with that gem.