14 Frequently Asked Questions about ReactJS
In 2013, Facebook open-sourced the popular JavaScript library, making it available for developers all over the world. Since then, it has been widely adopted by the development community with companies and organizations like Netflix, Khan Academy and Dropbox using it as part of their development stack.
If you’re just beginning your development journey as a web developer and you’ve chosen to use React, or you are considering it, you probably have questions you need answers to. We have gathered some of the frequently asked questions about React and will answer them here. The questions are going to be grouped into six segments, each about various aspects of React.
Structure
1. What is React?
React or ReactJS, as it is sometimes called, is a Javascript library created by Facebook for building interactive user interfaces for web apps and websites. It was created by Jordan Walke, a Facebook employee in 2011 to minimize the time and effort spent in creating user interfaces for web apps and websites. In 2013 the project was open-sourced and is now being maintained by Facebook and individual developers and companies from all over the world.
2. Is React a framework or a library?
The question of whether React is a library or a framework is one that keeps coming up. Although I already stated that it is, in fact, a library above, I want to explain further why it is a library and not a framework.
One key difference between a framework and a library is that a framework defines the structure and architecture of your code. It dictates how your app is to be developed. You can think of it as a template for a house. A library, on the other hand, is more like the furniture and house fittings you can add to an existing house.
A library is a collection of programs that perform common repetitive functions during development. So just like with furniture, you can add a library to an existing codebase to make use of. This is precisely the way React is designed. It can be used to create UI components for your application or edit ones previously created with HTML. You define how you want to use it, which contrasts to how a framework functions.
But React does have some framework characteristics. Although you define how you make use of the library, it is still pretty opinionated about how certain things are to be done(Flux specification, GraphQL specification, etc.). By the way, Facebook, the creator of React, calls it a library.
3. What language(s) is React made of?
As I have repeatedly mentioned above, React is a Javascript library, and hence, it is made with Javascript. So to make use of it, you use Javascript primarily. Optionally, you can choose to use JSX or Javascript eXtension, an XML-Esque language, to build UI components. The JSX syntax would still be converted to its Javascript equivalent, but it is much easier to write.
Due to React’s popularity, there are also bindings for almost every language that transpiles to JavaScript (TypeScript, Flow, ReasonML, ClojureScript, PureScript, etc.). There are also plentiful of documentation on how to integrate it with other languages (for example, ReactJS.NET, which makes it easy to use in C# applications).
Setup & Use
4. When is React used?
React was initially released by Facebook as a Javascript library for building user interfaces for the web. It has since advanced past that. In 2015, Facebook released React Native a cross-platform mobile framework which makes use of React to build user interfaces for Android and iOS.
5. Does it need any additional setup?
Setting up React isn’t as simple as just launching a setup file. It involves a lot of processes. Asides installing the React library itself, there are other packages you need to install and a lot of configurations to make to have a complete React development environment.
You still have to install packages like webpack and babel and configure them to have a complete React development environment. You could probably skip installing these packages and develop simple projects without them, but for larger projects, you should have them installed.
6. Can it be added to an existing project?
React being a library can be used with an existing project. After setting it up on your system, all you need to do is add the react and react-dom script tags to your existing HTML code, and then call the Javascript file containing the component you created with a script tag as well. Then you place a div tag with the components name as its id where you want the React component placed, and you’re good to go.
7. Does React support gradual migration?
React was designed in such a way as to make it easy to adapt gradually. You can make use of just a few of its features while leaving others out. Over time, you can include more React features to your codebase. Popular companies like Netlify have successfully migrated from other JavaScript libraries/frameworks to React, doing so incrementally.
8. How do I host React applications?
React applications can be hosted like any other web app. There are a lot of options you can choose from. You can host your React app on Github Pages, Netlify, Heroku and so many others although these are more suited for static websites. For dynamic sites, you might want to consider a solution like AWS, Microsoft Azure or Google Cloud.
You can also decide to make your website either server-side rendered, client-side rendered or prerendered before hosting. Your use case would determine which of the three is best for you. React supports all three of these rendering methods. React apps are by default made to be client-side rendered.
But sometimes, you might need some of the advantages that come with a server-side rendered application like SEO and perceived performance. However, if most of your webpages are only accessible behind login pages, then a server-side application isn’t worth it. A client-side rendered website would be more suited for your purpose.
Developer experience
9. What is a React developer’s experience like?
Overall, developing with React once you have all the necessary packages installed is easy. But you have to set up your development environment first which involves installing several packages and making configurations needed for smooth and hitch-free development.
To develop React apps, you make use of JSX and Javascript. If you have been developing websites before now, you would have picked up Javascript. JSX, on the other hand, is specific to React and would require a little bit of time to learn it. Although it is optional, it makes writing React components easier.
React also supports full use of HMR (Hot Module Reloading), allowing you to update your application on-the-fly, without the need to reload the page.
10. What’s React ecosystem like?
There are a lot of tools and libraries available to aid your development with React. There are state management tools, formatting, type checking, authentication, testing and lots more. Together they form a kind of framework but with more flexibility as some of these tools have more than one option.
Performance
11. How performant is React?
React is quite fast, and it is so because of one main reason, the Virtual DOM. The DOM or document object model is a representation of your HTML code. It’s what gives Javascript the ability to manipulate HTML elements. It makes use of the DOM API to achieve this. Unfortunately manipulating the DOM can prove tiresome due to the nature of modern websites.
The React Virtual DOM is a simpler copy of the actual DOM which you interact with React. Instead of reloading the whole DOM each time there is a change in state, it re-creates the React DOM and compares it to the previous version using a difference algorithm. It then instructs the DOM to reload only the affected area. This significantly reduces the time taken to update a page.
Market adaption
12. Who are React’s competitors?
When React was initially released its only competitor was Angular JS There are now more than ten libraries and frameworks taking React’s market share. Some of these libraries or frameworks are Vue, Ember, Aurelia, Elm, Mithril, etc. with Vue being the most popular of them all.
13. Which companies use React?
React is being used by a lot of popular companies. Some of them include: Facebook, Instagram, Whatsapp, Netflix, Khan Academy, Yahoo, Codecademy, Dropbox, Airbnb, Microsoft, Atlassian, Slack, Storybook, and many more
14. Pros & Cons
What are the advantages of React?
By now, you should have gotten a good idea of what those are. But to recap, I would list them here.
- The use of a virtual DOM makes React apps faster.
- With React you can re-use previously composed components.
- There is support for server-side rendering of websites.
- You do not need to worry about framework-specific code as React is a library.
What are the cons of React?
React just like a lot of things has disadvantages. Some of them are:
- React is continuously and frequently being improved. It might be hard to follow the pace of development.
- JSX or Javascript extension, which is used in creating React components, can be quite hard to learn.
- Unlike with frameworks that define how your app is to be structured, you have to structure your app yourself. This is not necessarily a disadvantage if you know how to.
So that’s it. I hope some of the questions you had if not all about React have been answered. To get started with React, you can visit React’s website, ー Reactjs.org.
