Osamah Aldoaiss

Misconceptions about React

We are all aware that drama and framework-fanboyism will never go away and there are many misconceptions around certain technologies. This post is not to convince anyone to use React, but to get rid of misconceptions. There is nothing worse, than reading a tweet and a blog post, that has clear errors of understanding.

Let’s dive right into this.


1. React needs transpiling

This one is a fun one. You can use React completely without any transpiling step with babel or webpack. I have done many small widgets and tools for clients, that got integrated into Shopify stores, Wordpress pages and even applications running on other frameworks, just by loading the react and react-dom libs and adding a script tag.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script>
const e = React.createElement;
function SliderImage() {
return e(
'div',
{ className: 'tSlider--image-wrapper' },
e('img', {
src: 'something',
className: 'tSlider--image',
})
);
}
function Text() {
return e(
'div',
{ className: 'tSlider--sliderText' },
e('h1', { className: 'tSlider--headline' }, 'Fun stuff'),
e(
'span',
{ className: 'tSlider--subHeadline' },
'This is a React example without any transpiling ',
e('b', null, 'with a bold text'),
'. ❤️'
)
);
}
function TeduschSlider() {
return e('div', { className: 'tSlider' }, e(SliderImage), e(Text));
}
const domContainer = document.getElementById('slider');
ReactDOM.render(e(TeduschSlider), domContainer);
</script>

This will render a header with an image and a little bit of text. All we used here is the React.createElement('div') function which is equivalent to JSX in the format of <div></div>.

It is very well possible to write React without transpilers.

Disclaimer: Because many have mentioned this to me, this is of course not a good way of writing a React component. It is valid one, but writing JSX, which is synthetic sugar for exactly that, is much more efficient.


2. React is not inspectable / not real HTML

The result of the code above is this HTML code, copied out of the browser:

<div class="tSlider">
<div class="tSlider--image-wrapper">
<img src="/some/path" class="tSlider--image" />
</div>
<div class="tSlider--sliderText">
<h1 class="tSlider--headline">Fun stuff</h1>
<span class="tSlider--subHeadline">
This is a React example without any transpiling <b>with a bold text</b>.
❤️
</span>
</div>
</div>

This is how the Elements tab in Chrome DevTools shows it.

React generated Markup in Chrome DevTools

Looks a lot like HTML to me and inspectable like vanilla HTML.


3. React promotes inline-styles

I have worked on a lot of applications and with many clients and I have very rarely seen people use inline-styles with React. The rare cases, where to add background-images dynamically or to change the colour depending on certain actions, although there are better solutions for those.

It is true that React has many CSS-in-JS solutions, to just list a few: emotion, styled-components and so many more. Each one of these have their own flavour of writing CSS. Some even have multiple valid and recommended ways.

The most popular way to start a React project is create-react-app by the React team. It comes with three options out of the box: CSS, SCSS and css-modules (many would consider this, just normal CSS).

If you are using a bundler like webpack, all you need to do is import a CSS file and the styles will be automatically added. A simple import './styles.css' is enough.

The way how styling is handled in React makes it diverse and every team/person can decide by themselves, what the correct and best approach is. There is no dogmatisation.


4. React doesn’t use web standards

This one is my favourite and the most difficult to argue for or against. The term web standards is very arbitrary, but what the most people were referring to is HTML, CSS and JS.

Well here is where things get weird. React uses only JS and the ReactDom Reconciler turns that into HTML nodes, CSS is being injected into the browser if needed or loaded at the beginning.

Now this is pure web standards in my eyes.


5. React is not accessible

This misconception comes from many developers being uninterested in writing accessible applications. This behaviour exists across all frameworks and technologies. It is a general problem of current web development.

The lack of resources and trainings, also the pressure from Product Management or CEOs, who do not care about accessibility contributes to this happening. It appears to be a React problem, because React is by far the most used library currently.

Projects in the React ecosystem worth mentioning here are especially Downshift and ReachUI by the great Kent C. Dodds and Ryan Florence. Their efforts to educate developers in these fields are great. If you are using eslint adding eslint-plugin-jsx-a11y to your config will greatly with your accessibility efforts.

We need to have a general discussion in the web development world about accessibility.


6. React is too difficult to learn

If you want to use every single concept in the React APIs, then yes you may be right. But many of these APIs are not necessary for many developers. The last addition to the React ecosystem that changed how we write code dramatically was the Hooks update in React v16.8.0, but it didn’t take away the possibility to keep writing in the old way (eg. with Classes).

React introduced a new Context API, a new way of working with refs and changed the lifecycle hooks. I am going to be honest here, I have been working on the Homelike App for a year after those releases and I did not use any of the three until a month ago, where I added a Context for the first time in an internal app, so I don’t have to add the Redux boilerplate to the app.

If you just want to write React with Classes go ahead. Want to work with Functions use React.createElement. React gives you the possibility to write however you want.


In conclusion, I wish for everyone to approach other technologies with the respect they deserve. All of these projects exist, because people are passionate about them. If you don’t want to use them, that is up to you. But don’t flame others for their decisions.

;