Tbh, I think the tutorial on React’s site itself is pretty good at making an introduction to the framework and the React way of thinking. It’s the one here: https://reactjs.org/tutorial/tutorial.html
As for changes during its lifetime, I would say that it is fairly on par for most web-focused frameworks, both front and backend. You could look at how ASP.NET has changed over the last few versions for example and see it being similar to React’s changes. The largest changes in React recently have been a greater focus on moving from syntactic sugar JS classes to pure functions, and React Hooks that go along with that. There’s definitely a shiny things syndrome you get if you just google for React tutorials, which is a bit annoying, but the official docs are pretty solid, and a few of the core devs are great to follow from a philosophical standpoint (like @dan_abramov).
I did not have a simple experience with React. I did front end development for years, ending with jQuery-driven AJAX sites pulling from REST APIs (2013), and when I tried to learn React this year it was all voodoo.
Is there a good tutorial out there for lapsed front-end devs?
I found React one of the easiest frameworks to learn and pick up but I had the benefit of learning React after working for a few years with Backbone and Angular. I found the opinions of the framework to be sensical and guided by the realities of web application development and developer experience.
> 1. i haven’t invested enough time on learning it.
I usually find the types of tutorials Brad references in this section to be very bad at actually connecting with the real process of using a framework. What you're building is just as important as what you're building it with. When you find the right project to use the right tool, it helps the principals click so much more quickly.
> 2. react and es6 travel together
This is definitely a pain point but I think the crux of this is JSX. Most every other convention in React is a very straightforward use of ES6 syntax. Most of the awesome, difficult, but not broadly available parts (generators) of ES6 aren't used in React's public API.
> 3. syntax & conventions
I think React could benefit from a clearer breakdown of how JSX translates to actual JavaScript. Babel's REPL is a good first step. [0]
> 4. getting lost in this-land.
For the most part I've found React's use of JavaScript OOP and `this` to be the most sane. You can use what amounts to a bit of boilerplate in any component that needs state and use `this` within lifecycle methods without batting an eye. Backbone and Angular had all kinds of headaches when trying to explain `this` to junior developers. And don't get me started on libraries that used `this` to pass context around.
> 5. i haven’t found sample projects or tutorials that match how i tend to work.
I think React excels at matching his ideal workflow, but doesn't do a good job explaining how to achieve it. Higher Order components and smart/presentation components are very under-documented.
I did web dev from 2012-2015, until I moved into doing security engineering. I started doing some React tutorials on the side in December and now have a small project at work that uses it. I do not consider myself a web dev, so I will take any actual web dev's opinions over mine, but React seems nice!
At first it seemed a bit complicated, but looking back at the stack I left behind in 2015 (LAMP, numerous JS libraries, Bootstrap, some Ruby was starting to creep in), it actually is a little more consolidated.
I guess I should bookmark my comment and check back in a year from now in case I am still using React and see how my thoughts change by then!
I've used React occasionally for a couple of years. I just blasted through the tutorial in 10 minutes to refresh my knowledge and check if any best practices changed in the last year or so. It was perfect for this.
My approach to React was similar to Brad's, as I am far more proficient with HTML and CSS than JavaScript. I'd done plenty of wacky stuff in jQuery, and that tutorial demonstrated how React can iron out some of the problems that spaghetti jQuery can create.
I'll also add that part of the problem with wading into React is that, if you're a certain kind of frontend designer, you remember the browser wars, and you would often wait until tech was mature before you went out and used it in production. But React was adopted quickly and has changed quickly. React Native is even worse in that regard. So even if you learn how to do something a certain way, that knowledge could be obsolete in a year, or less.
React feels pretty settled now, it's been out for 10+ years, hooks and functional components have become the standard.
If you want to learn it I think it's at a mature enough place.
Popular libraries like redux have been rebuilt to use hooks and simplify the integration.
I'd also check out Remix[0] if you wanted to get into a React framework. It's fairly new but extremely promising and easy to get up and running and even deployed anywhere (express server, cloud flare workers, deno, etc)
How complicated is it to learn a framework like React (which celebrated its 10 years 3 months ago) if you have a background in software engineering and some basic knowledge of HTML/JS? Like an afternoon to read the doc? 3 days to practice and be totally fluent? I managed graphic designers who knew nothing about computers but were able to learn React and be very productive.
The idea that React 10 years ago is the same as React today seems to be highly oversimplified. React was simple, then hooks were added, and state management fads that turned something simple and intuitive into an IQ signalling exercise. At least that was the case when I switched to back-end only dev a couple of years ago. And of course other parts of the stack also keep evolving: TypeScript (which is probably a positive, but again, I know people who do bizarre things with the language to build their "nerd cred").
Off the top of my head there was also Grunt/Gulp/Webpack/whatever is around now. NPM-Yarn->NPM. Angularjs->Angular 2.0+.
How many different CSS positioning methods are there? (that's what led me to leaving front-end, I was expected to do a pixel-perfect rendering of a design for a time-critical back-office app for some reason).
Sort of off topic I guess, but: if I wanted to learn react nowadays (coming from extensive backend experience but not much in the front end) where should I start?
From ignorance, it seems like react has changed a fair amount during its lifetime, in terms of good practices, features available, etc. Where can one find resources that are both complete for a begginer and not outdated?
If you don’t mind a slight tangent, where would you start today to learn front end development with React such that you learn this sort of thing as you go?
In that case, perhaps our views here aren't so different. I'd agree that React was a relatively rare qualitative step forward in the tools available in web development, precisely because it did bring some ideas and programming styles into the front-end JS community for probably the first time. I just disagree with the idea that this was unlike anything that had gone before, because essentially the same fundamental ideas and programming styles have been used elsewhere in the programming community for a very long time.
For the most part, the changes really shouldn't affect typical users. The biggest change in React from a dev perspective was function components, maybe 2 years ago. If you keep your state outside of React, it's dead simple to use.
I think it's a great library and has only really gotten simpler and better. But, to each their own.
Yep, React seems to have been built from the beginning as a new foundation. It leveraged ES6 features just as they were coming out, so we got to learn a new way to write JavaScript and HTML at the same time.
I think the number of concepts that need to be understood to be an efficient React developer has grown over the years just enough that it has become slightly frustrating to learn. It is still presented as a very simple small surface area framework but there's a lot of subtly with how many new concepts need to be understood now like hooks as an example. I think it just crossed a threshold and became less intuitive and more tiresome as a result unless you are embedded in React land and do React stuff all the time.
I haven't messed with it too much. I just did a toy project with it when I was first starting out with React and trying to understand alternatives.
My main problems with React have been: (1) I felt pretty comfortable with the object-oriented style of react components and really didn't feel the need for hooks, it's taken me a while to get on top of them because I need to maintain or use hook-based code, (2) A react app can drive you insane with a large number of widget sets that are all leaky abstractions. For instance you might hope that react bootstrap would let you forget about CSS and maybe it does for some projects but you might get into some situation where you have to understand CSS and understand the way bootstrap uses CSS and you might conclude you'd be better off writing your own CSS and (3) applications that call render() a tremendous number of times.
None of those things really turn me off to React but for an application I am developing on my own account (a workflow engine with machine learning training and inference features) I am writing a server-based web app not too different from the ones I wrote in 2001 with very little Javascript.
I find these easier to write than ever thanks to my own maturity and the maturity of the tools I use. With a localhost server it is fast as a desktop application. The #1 issue if I was using React is the extra hassle of a Javascript build system (pypi is bad enough!) and #2 is I could spend forever picking a widget set to use.
If I was interested in something like React I would seriously consider svelte as it has a different model that seems to perform a lot better, even if it doesn't have the huge ecosystem React has.
Honestly I don't know how I learned React. It's not fun at all. Oh sure, the basics of React is not too hard. If you ignore all the outdated examples and code (using var, no JSX, overusing component lifecycle, not using functional components). But then learning Redux, React Router, React JSS, Reselect, Redux Thunk, Webpack, etc., is just terrible. Sure, there are tutorials for each individual library, or maybe even two or three of the libraries at once. But combining all of them and making sure that it's not a total mess of code is like trying to play QWOP with your code. Now that I have everything compartmentalized and understood, it's pretty easy. But getting there is a long long journey.
I've played around with an idea for a tutorial on modern web development that starts with just basic JS DOM fiddling, then introduces various features and techniques as they're needed. So you'd start with just using old school document selectors. But then, as all the getElementByClassName calls become annoying, maybe you'd introduce transpilation, so that you can querySelector with a map/filter. Then, as the updating starts to get hairy, you could introduce a library like React. As state becomes an issue, Redux. But the point would be to start with the basics and build up an understanding of why we need these libraries. And what problems they solve and what problems they don't solve. But of course, the moment anybody writes this tutorial, half of it will become outdated. Ah well.
From what I see, we are moving away from a heavy server which does the heavy lifting to thin server layers that just send data and feature rich UIs that process the data. This is possibly because the browser has become a widespread means of distributing general software.
As a result, the domain of "backend" engineering has bled into the frontend and thus frontend engineering has gotten more complex.
If you purely want to learn React in a way that allows you to do some light modification of an existing architecture then something like create-react-app or some browser codepens will be the best way to get involved with the library.
Otherwise, if you want to understand React from a more fundamental sense, going away and doing some backend courses or learning some basic CS and/or FP architecture may serve you well in understanding the paradigms that inform React's design. As a bonus, these skills will never be useless.
As for JS tooling, it's not ideal and is definitely a lot to learn all at once. Your best bet is to abstract over as much as possible and learn only what you need to when you have to. Though, again, the skill of picking up and using new tools is a valuable one in this line of work.
As for changes during its lifetime, I would say that it is fairly on par for most web-focused frameworks, both front and backend. You could look at how ASP.NET has changed over the last few versions for example and see it being similar to React’s changes. The largest changes in React recently have been a greater focus on moving from syntactic sugar JS classes to pure functions, and React Hooks that go along with that. There’s definitely a shiny things syndrome you get if you just google for React tutorials, which is a bit annoying, but the official docs are pretty solid, and a few of the core devs are great to follow from a philosophical standpoint (like @dan_abramov).
Hope that helps!
reply