Jose Yamut, Jr

Fond of +rw but seldom has time 4 both. 😎😋🤖

Programming

Quick Guide On Starting With ReactJS

For some time now I’ve been planning on learning ReactJS. It is all what front-end developer talk about theses days. Heck, full stack application developer job offers always pair ReactJS with [back end programming language goes here] in the job description almost without fail. That learning plan has not happened yet, though, and unfortunately for me. I’m the great procrastinator. Many times I only get the motivation when there is an actual project happening very soon. Preferably a paid one, of course. Without it I seem to suffer from a “short attention span” issue. What can I say, I’m a big fan of winging it. 😁

I did take the first step on this planned learning process back in late 2020, by asking a good developer friend of mine – who happens to use the ReactJS stack for his projects – on tips of where to start. He was a presenter for one of the topics about ReactJS (obviously) in one of those tech talks held at the Freelancer.com offices somewhere in Bonifacio Global City around 2019. (I also met this dude for the first time in that same event, and we have been corresponding since then.)

The following are my ReactJS dev friend’s recommendations to get the ball rolling on learning ReactJS. He terms these as a starter kit / boilerplate approach, which takes you straight to application building instead of pouring hours of configurations and setups. This is his favored method of diving into ReactJS and get the proverbial feet wet as soon as possible. That is – get into it right away! And I quote:

Building your own project from scratch takes time. If you just want to test the waters and build React projects quickly without wasting time in setups, I highly recommend the boilerplate to you.

facebook/create-react-app – https://github.com/facebook/create-react-app

This is a quick way to “test the waters and build React projects quickly”, he said.

React Starter Projects – https://www.javascriptstuff.com/react-starter-projects

For other starter kits/boilerplate projects, this one would be a good start where you can copy and modify to create, experiment and shape as your own React app.

You might wonder how you’ll be able to learn ReactJS this way, when it’s already a ready-made web app?

I guess the point here is that this comes with the unsaid assumption that you have the programming basics covered, and know how JavaScript works. At the very minimum, in my humble opinion, it is better that you would have already done projects using the JavaScript language. Implied but not stated.

Well I like this style. More or less I’ve been in this situation several times. In fact I prefer it too. But not always. It is almost like going at it in reverse. Trying to understand how it works by looking and inspecting at the nuts and bolts of a finished product. Then go back to read more about it. Limiting these to the components that was experienced at first, before going into other domains that all the technology was designed for and is capable of doing. Sometimes the subject is just too broad, learning it all requires a serious amount of time. It may not be suitable always when only a subset might be required.

Which brings us into the next thing. Starting from scratch. Sooner or later you will have to do it bottom up on your own. These are what he mentions as essential.

Babel – https://babeljs.io

It is a toolchain used mainly to convert ECMAScript code so that it becomes a backwards compatible versions of JavaScript in the current and older browsers or environments. Simply put, use new and advanced syntax without having to wait for browser support.

Webpack – https://webpack.js.org

This is a module bundler. It bundles your projects JS files into one, or split it into several parts. This is done to boost performance of your web app. It works pretty well with Babel too.

Redux – https://redux.js.org

Further deep, ReactJS accordingly is all about components and states. Thus the need for state management. The most famous one being Redux. This is recommended for managing states of complex and bigger apps says my dev friend from his experience. Although nothing but stops you from using it for simpler ones, I suppose, if the goal is to learn. The Redux website describes itself as: Redux is a predictable state container for JavaScript apps.

Flux – https://facebook.github.io/flux

Before there was Redux, there was Flux. Developed by Facebook. Flux is what is used to build the client-side facing web applications of Facebook.

MobX – https://mobx.js.org/README.html

Yet another state management library like the 2 previous ones above.

To get a more detailed look at all the technologies laid out here, you can head out to – https://medium.com/hackernoon/quickstart-with-reactjs-everything-you-need-to-know-in-5-minutes-8c78d0ef9680 – by Sonny Recio.

Similar Posts:

For some time now I’ve been planning on learning ReactJS. It is all what front-end developer talk about theses days. Heck, full stack application developer job offers always pair ReactJS with [back end programming language goes here] in the job description almost without fail. That learning plan has not happened yet, though, and unfortunately for…

Tags: