Using Javascript for your frontend single page apps (SPA’s) can lead to highly interactive and very friendly user experiences. It can greatly reduce or deminish the need for browsers to send requests to a server, and in turn speed up the usage and flow of your applications. On top of that, the use of Javascript is fun! It can open up the doors to a great many features over those of HTML and CSS.
Sooo… I learned how to use Javascript, how to implement it in unison with HTML and CSS, and how to create SPA’s with Javascript, and the use of a Rails backend if need be. Why would I have the need to learn and use React?
Why Use React is one thing I was wondering after building what I thought was a pretty robust JS SPA. What additional features does React bring to the table that I need? This blog post will hopefully line up the answers to those questions for you.
The front-end development world moves fast. Tools come… and tools go… quickly. As we have all learned, there are a lot of very smart and talented people in the development world, creating products and tools that allow for future projects to be created more easily, or more efficiently. React is one of those tools, maintained by the Facebook as an open source javascript library, which has gained adoption by many large and small organizations alike. It has been used since its launch in 2013 to build over 36,000 online applications, and seems to have taken the front end javascript ecosystem by storm of popularity. It is definitely here to stay for some time.
What are the benefits of using React?
The benefits of knowing JS allow you to choose the right tools for the job. Here is a quick list of why React is one of the most popular tools for front end development, and also the creation of SPA’s:
- Boosts productivity, code is reusable, and easier to maintain
- Rendering of DOM changes is fast and efficient
- The structure generates inherently stable code
- Helpful developer toolsets
- Simple, efficient, and easy to learn
React will…
Boost productivity
Once learned, react is quick to program and use. Code is written in components, of which the goal is that those components are reusable, easy to debug, and easy to maintain. Because of the large adoption of react across the front end community, there are also many available open source tools, resources, and components ready for use in your own project.
Render DOM changes quickly and efficiently
React code is build in individual components, and Facebook implemented their own flow of data as react is rendered, making DOM changes very quick and allowing for the use of lower resources. React renders code written in it’s own JSX format (a hybrid between HTML and Javascript), and uses what is called “State” and “Props” to track elements within a component, watch for changes, and update the component based on those changes. It then renders the changes within React’s own “Virtual DOM”, which allows for the update of each component individually, before sending the changes to the real DOM which allows for minimal updating and extreme efficiency.
Generate stable code
Because React implements the use of state and component architecture, errors are easy to debug, and issues within a child component won’t affect a parent component. The structure of data binding to components allows for better stability and performance.
Provide Helpful Developer Tools
Learning a new framework or library to implement in a future project or enhance one of the past can be a daunting task. Though some are easier to learn than others, having additional tools to use during learning and development allows for higher success using that new product. React comes with a very good, and regularly updated and maintained, toolkit for developers. React Developer Tools is available on Chrome and Firefox, and allows developers to observe React components, hiearchy, state and props.
Be Simple, And Easy To Learn
A common pain point to learning new tools or languages is the difficulty to learn and use them properly. Luckily for us, React is an easy one! React comes with well developed, and easy to follow totorials and resources, and has a large community of adopters, allowing for ample resources across the internet when researching issues. When learning a tool, its nice to have support from fellow users across the board, working with fortune 500 companies to small independent firms.
So Yeah, React, It’s A Good Choice
Hopefully this short blog post helps new developers when choosing what Javascript tools, frameworks, and libraries will boost their productivity, help them become better programmers, and produce better products! Whether delving into more front end oriented development, or having just past the Javascript portion of Flatiron School, and wondering what’s next and why, React is a very good choice for futher personal growth, and will provide a giant leap in ability from vanilla JS.
