DEV Community

Cover image for Three Stages of My Relationship with React
Dell  Ward
Dell Ward

Posted on

Three Stages of My Relationship with React

This may be an oversimplification, but React's main purpose is to provide developers a blueprint on how to structure your application's UI. The rest is up to the developer. This means finding and implementing your own tools for servers, routing, styles sheets, state management, etc. React doesn't hold any hands. This makes the learning curve very steep but also rewarding in the end. React is feisty but undemanding, friendly yet independent, And I've fallen in love.

I love React. It's late and I may just be sleepy but my time with React sort of feels I like the development of my relationship with my wife. Hear me out:

Configuring

Here React is playing hard to get. It plays the game of forcing me to get know itself, without giving away too much. It wants me to succeed, but it's not sure what it needs and wants me to figure it out, sometimes telling me that whatever it is that I'm doing, I'm doing it wrong. It loves someone with persistence. So I start to tell others about my dilemma, get some answers and I come back with a plethora of tools to use to see if React can finally reciprocate my affection.

Developing

At this point we figured (configured?) each other out. I'm still learning things about React but I know what makes it tick, its pet peeves. We complete each as other as we continue to build towards something great. There are some hiccups but we get through them much faster and in a more mature way than if we were still "talking".

Producing

When React and I are confident in our relationship we'll start planning to produce a bundle.js of joy of our own. Yes, I know this bundle is technically created during development but that doesn't mean it's ready to be delivered. Let's say up until now it was still in gestation. There's no turning back once your app is released to the world. The job now is to take good care of this application, keep it healthy and safe. A parent's job is never done and in this stage, neither is a developer's. I haven't reached this stage with React just yet but it's something I'm looking forward to soon.

In all seriousness, so far React has been pretty dope. I've only been working with React for a few months but my excitement for it landed me an invitation to a development team as a co-founder of a potential startup. I still call myself a beginner and this is my first team so who knows how it will turn out. But I do know this will be a great learning experience. Exciting times!

Top comments (8)

Collapse
 
belhassen07 profile image
Belhassen Chelbi

wooohoo ! good luck mate, I'm also a react beginner, I'm using it now with express.js which really cool, I'm figuring out a proxy problem now, but yeah that's a dev life (full of errors).
great article !

Collapse
 
dellward profile image
Dell Ward

Thanks! Good luck to you also. How is that going? I'm just learning how to integrate express with React.

Collapse
 
belhassen07 profile image
Belhassen Chelbi • Edited

create-react-app is running on port 3000, express is running on port 3001.
I'm fetching data using fetch('/users')... this will fetch localhost:3000 not localhost:3001 where express is running (and express will send the json data when you're making the ajax request right?) so what I needed to do is to add "proxy" : "localhost:3001" so the ajax request can be "redirected" to port 3001 to get data sent by the express app. If you're feeling dizzy, it may be because you're seeing things. Checkout this : you'll end up by making your first react+express app

Thread Thread
 
nicowernli profile image
Nicolás Wernli

You can pass the entire host to fetch if you need so. fetch('localhost:3001/users'). Maybe if you create a function that adds the host for you and changes de host depending on the environment you are done.

Collapse
 
nickytonline profile image
Nick Taylor

Dell, happy to hear you've fallen for React. If you're still learning and don't need to deliver anything, I'd highly recommend just heading over to codesandbox.io and just mess around and build stuff.

If you don't need server-side rendering, Create React App is a good choice. Most complaints usually are about stuff like, it doesn't support SASS or that you can't customize the webpack config. If you want to go that route, you can always eject and customize or you could look at a project like custom-react-scripts. I've personally used it to only do a test, but that's mainly because all the React I write professionally is in TypeScript. Having said that, there are scripts for Create React App that customize it for TypeScript 😉. Also, a perfect segue for a shameless plug of my blog post, Why You Might Want to Consider Using TypeScript.

If you need server side-rendering, next.js is a great choice from the wonderful people at zeit.co. If you don't want to work with their routing system, you can always look at after.js which uses React Router 4 instead.

Collapse
 
dellward profile image
Dell Ward

Hi Nick, Thanks for the info. I'll most likely go back to create-react-app pretty soon. I just like to go back familiarize myself with the setup. I have this constant need to break down abstractions, and it does slow me down sometimes.

Collapse
 
martinhaeusler profile image
Martin Häusler • Edited

I primarily work as a Backend Developer, but I touch some UI every now and then.
Getting a react project set up is really hard, I totally agree with the article here. However, from there on out in most parts it's relatively easy because react itself is very lean and lightweight. If anything, I find myself struggling with getting CSS selectors right, or with awkward inconsistencies in the DOM API (things like: do you use the value attribute or the inner HTML to display text in a textarea?). React itself causes troubles very rarely.

Collapse
 
dellward profile image
Dell Ward • Edited

Oh yeah, definitely. I'm still a beginner, so there's still a lot to learn about the lifecyle methods.