Opinion of REACT

1

Anyone have thoughts about REACT?
Although I am still learning it, my feeling is it is maintaining state between components is a massive headache. :confused:

This is adding lots of extra development time which in the real world (where time = cost) may not be acceptable. So what is the benefit?

A super fast app. Well yes the updates are fast but the initial loading of the page is slow.
And does the real speed benefit only appear when using large data sets?
I would say the majority of sites donā€™t use large data sets.

Also our full stack app has +874 hidden modules and webpack takes over 30 seconds to save. Wow! :open_mouth: So much code!!
bundle.js is now 3.7 mb and 113026 line long!
Is this normal?

2

Hi @JohnnyBizzel

Personally, I love React, or at least, I love the whole idea of small, composable components inside of JavaScript. It makes writing dynamic applications a lot easier than using something like jQuery. Obviously, if youā€™re just creating a static page that has little interactivity, then using React is probably overkill.

Another library that seems to be picking up some steam is Vue. I havenā€™t looked into it too much yet but it seems to be a hybrid of Angular and React that also has some interesting ideas.

I agree, managing state between components can be a headache, thatā€™s why I tend to use Redux if Iā€™m dealing with data that is anything more than binding an inputs value to state. Having a central, easy to access, state object makes live SOOOO much easier. Redux also provides some useful bindings for use with React: GitHub - reduxjs/react-redux: Official React bindings for Redux.

Also, if you donā€™t need to manage state or refs inside a component, you can use a functional component which, I believe, React optimises for speed.

function MyComponent(props, context) {
  return (
    <div>
      Stuff...
    </div>
  );
}

You can also decrease the initial load times by using server rendering, so the server compiles the initial page state into an html string, which you then send to the client on load.

As for the real world, I couldnā€™t really comment on that as Iā€™m not professionally developing yet, however, I believe I read somewhere that 80% of your job is likely to be maintaining existing code. So if a code base is well written, fixing issues in small components should be fairly easy and quick compared to fixing code in a jQuery codebase; at least, I would think so anyway.

Do you mean freecodecampā€™s site? I personally wouldnā€™t know if thatā€™s normal or not; I can say that by itself, React is around 25000 lines, so that would add a bit of meat to that total.

1 Like
3

Thanks for your reply. I havenā€™t fully read it but the size of bundle.js relates to https://github.com/JohnnyBizzel/voting-app (in this repo 1.9mb) but it has swelled since we tried to implement authentication (Auth0). Crazy.

4

That does seem rather large, although, doesnā€™t look like your minifying your bundle, that could save quite a lot of bytes. You only want to minify for production though.

For comparison, my minified bundle for the voting app is 391kb and I used React for mine as well.

1 Like
5

That sounds a little unusual about webpack taking 30 seconds.

Personally, I think React is awesome! And managing state between multiple components can add some extra boilerplate, but typically the pattern is to contain state in the top level components and pass it down as props. I think that the extra code required to do this is a tradeoff for improved code readability and maintainability, however, it does take a while to get used to.

1 Like
6

Iā€™m using React these weeks for a school project - creating admin panel from scratch.
At the beginning, it was pretty challenging to learn about Webpack, Babel etc and why I need all of these but I can tell you that now after I have a stable admin panel with authentication - I cannot imagine how I could have done that without React.
The concept of components and props is very useful and comfortable for me, making ideas like showing cards based on information from the server pretty simple.

7

React has a large ecosystem having been the first to introduce virtual-dom, however, there are some drawbacks such as cognitive load and much boilerplate required. Reactive programming can help reduce this complexity and in the process reduce the library code and the code necessary to write such programs. Already, there are very performant competitors to react such as vuejs inferno and monkberry which perform better than react using less code and introduce concepts like reactive programming to reduce the cognitive load and write working code faster.

1 Like
8

Iā€™ve just started with React, so still getting to grips with components, state and props. There is a lot of setup, but there are also some smart ways to simplify code. Iā€™m following Andrew Meadā€™s course on Udemy (which is fantastic), and he recommends the following:

  1. Using aliases in webpack.config to define your paths. Then you can import components with
var Component = require('Component'); `
  1. Using stateless functional components for presentation components. This allows you to avoid React.createClass and the render. With arrow functions, it is even more concise:
var Component = (props) => {
    return some JSX;
}
  1. Using ES6 object destructuring. This makes it very concise to pull variables off a props object. You can even do it inside the function parameter:
var Component = ({propA, propB}) => {
    return some JSX with a {propA} and {propB} inside;
}

I think no.2 above is supposed to improve performance. The others are just for clean code.

9

@arw2015 The mere fact that you have to pass off state and props everywhere is where I am struggling.
Perhaps my project is badly built, with too many levels of complexity? Not every tutorial explains how to build a complicated app. (The one I watched was 10 hours long.)

I am fed up of seeing ā€œthis.state.whatever is undefinedā€.

10

I watched this amazing tutorial of React, I gained from it basic understanding, read Facebookā€™s documentation and then started making my own React project (Admin panel)
You learn React from the very basic without assumption that you have previous knowledge with React.
https://online.reacttraining.com/courses/reactjsfundamentals/lectures/762566

2 Likes
11

I really like working with react. Having first learned to code in c++, using OOP, react just felt more natural. However when first learning to set it up locally, it was a headache. Then I found ā€œcreate-react-appā€. This makes it very easy to get setup and running in a local environment. So if you some how have missed it, I highly recommend you check it out.