I haven’t written anything in a while, and this is largely due to attempting to learn React.
All that being said, React is a pain-in-the-butt. For a beginner like myself, React has a pretty steep learning curve and it has nearly crushed my soul.
What Makes React Different?
I’d like to preface this by saying that React is not a new technology. It has been around for some time now, and has a huge following, so anything I have to say about what React is and what it can do has undoubtedly been covered extensively by people with much more skill & knowledge than I have.
With that in mind, here are some of my observations:
- React uses small components to build big things
- React forces coders to learn good code.
- React has components manage state, rather than the DOM
Let’s look at each of these things, so that maybe I at least can understand them better.
I have read in several places that good React components do a single thing. If you need to do two things, build two components. I have tried to take this approach, and the result is I end up with a lot of tiny components. I like this because every component has a single task and when it comes to debugging I know quickly where to look.
Another advantage here is when I read other people’s code who have taken this approach, I can pretty quickly get an idea of what they are trying to achieve.
Well, this one’s pretty self-explanatory. Most of my React apps have an html page consisting mostly of
render() function. This all gets rendered to a ‘virtual DOM’, which I’m told is a pretty great thing but I don’t understand the process well enough to really comment one way or the other.
Learn Good Code
I didn’t realize the usefulness of this until I built my last project. Part of it utilized a modal window for user input and in the course of development I was faced with the decision of building multiple, similar modal windows every time I needed one, or just reusing the first one I built and passing the necessary differences as arguments. Seeing as how the modal window ended up consisting of around 10 different components with all associated CSS and state, re-usability was looking like a pretty good option. I don’t know if this choice made me a better coder, but it used less code and felt pretty awesome when I finished it.
Components Managing State
In React, this is frowned upon. State lives in the components and once something is rendered to the DOM it is as good as gone and forgotten. If you need information displayed in the DOM you store it as state, then access the state as needed. If the information needs to change, it changes as state and then React will update everything associated with that state.
For me, at first, this was really confusing. I had always looked at coding from an imperative perspective, and felt it necessary to micromanage every step along the way. One of React’s greatest strengths is that it is declarative rather than imperative. You tell React what you want to do and React just does it. No need to spell it out every step of the way. When your state changes, React triggers a re-render and the changes get pushed to the DOM. No muss, no fuss.
Best Of All
Since growing in popularity, folks are realizing that React is not just for websites. React Native allows coders to build iOS, Android and Windows Mobile apps using React. React VR, you guessed it, is a framework for building VR apps using React. The long and short of it is, if you have a DOM there’s a good chance you can use React to develop for it.
For anyone wishing to learn React, the React Fundamentals Course by Tyler McGinnis was an excellent resource. The material is presented in an easy-to-understand format and you get the feeling that Tyler really understands what he’s teaching.