DEV Community

Ben Halpern
Ben Halpern Subscriber

Posted on • Updated on

Explain React to Me

React first came on the scene and introduced some new concepts, like State and Props. But mostly it introduced idea of declarative rendering based on the state of the program.

Since then React has evolved and expanded. Lots of new terms, and new concepts.

Can you explain React in 2019 to me, from a conceptual point of view?

Top comments (24)

Collapse
 
matthewbdaly profile image
Matthew Daly

A React component is essentially just a function that returns HTML. It can accept arguments if necessary, in the form of props, and can use those to determine what it renders.

While a component can technically be a class, it still makes more sense to think of it as a function, and with the advent of Hooks it's probably not necessary to build any one component as a class nowadays.

Collapse
 
tammalee profile image
Tammy Lee

"A React component is essentially just a function that returns HTML." This is a great explanation!

I would clarify, "A React component is essentially a JavaScript function that returns HTML."

Collapse
 
iwelch profile image
Isaac Welch

I think this is exactly the right way to visualize the pattern of react in a front end architecture. While I'm sure we both know the actual architecture is a bit more complex, this is a great way begin the discussion on conceptual react (it's often how I represent react in my architecture diagrams on projects).

The only suggestion I'd having is the idea of function and HTML is 1. A little too complex to be strictly eli5

  1. More specific than is needed, as these kind of dumb downed explanations allow for great opportunity for you to abstract the pattern away from the implementation.

Too elaborate on that last point. You could say that the react pattern is functions that return markup, and what is markup but a language to define specific structures. So we could even say that react is a pattern where we create functions that define structures, and can even use other structures to modulate the structures that they return.

This also tends to go over the head of a 5 year old, but I hope you can see my point about how abstraction can make an explanation even more meaningful.

Collapse
 
aminnairi profile image
Amin

With time, we observed some common patterns while writing front end websites. Like some part of the HTML we repeated. Or some JavaScript code that was reused. React is like an old grandpa that is so wise and has all that experience and you don't need anyone to ask for help expect your grandpa for repairing your bike or building a house. Of course he does not know EVERYTHING in the world. But it has a lot of tools that you can trust him to share with you. What is gonna take time is just how you want to build your house (3 or 4 chambers, 1 fireplace, ...). And what accessories you will put to your motorcycle (bar end mirrors, led turn signals, ...).

Collapse
 
th3n00bc0d3r profile image
Muhammad

I prefer Angular over React from my experience in React, it was supposed to simplify things and make better organize your code but I dont think so, it would turn out that way, somehow I find the concepts used in Angular far more robust, strong and more authentic towards the code writing style. I do have seen a lot of people that think Angular is hard and wanted to go to React but ended up in vue.js.

Collapse
 
antonmelnyk profile image
Anton Melnyk • Edited

Conceptually, React is actually an UI runtime. The real truth behind React is greatly described by the creator of Redux and one of the Facebook's engineers, Dan Abramov:
Link to the article

Very abstractly, React helps you write a program that predictably manipulates a complex host tree in response to external events like interactions, network responses, timers, and so on.

Where host tree is basically DOM.

Strongly recommend to read that article for every React developer.

Collapse
 
dance2die profile image
Sung M. Kim • Edited

pre hooks (before 2019?)

React decided where you put your logic in
(life cycle methods, such as componentDidUpdate/componentDidMount)

post hooks

You decide where you put your logic in
(hooks, such as useEffect)

with suspense (for lazy loading)

You decide what code to load and when.


In the near future (with suspense for data fetching)

Reference: "A thread on what Suspense is, and isn’t."

Collapse
 
skydevht profile image
Holy-Elie Scaïde
Collapse
 
sag1v profile image
Sagiv ben giat

(state) => UI

Collapse
 
xowap profile image
Rémy 🤖

Easy: if you got frustrated that PHP best practices moved to some form of architecture which separates the presentation from the data then you are not alone and Facebook got you covered. Enter the wonderful world of writing HTML in the middle of your JS again!

Collapse
 
taimoorsattar7 profile image
Taimoor Sattar

You can write an application without React. You can use React to dynamically load components [which are simply HTML elements] which you can achieve the same by writing (a lot of) javascript. React makes it easier to load dynamic components. With the huge React developer on the scene, Google started supporting crawling Javascript-based content.

Collapse
 
tammalee profile image
Tammy Lee

Caveat: I am not a JavaScript dev; my depth is WordPress and because of Gutenberg I've had to brush up on my JS.

React is a JavaScript framework where you create reusable JavaScript components that translate to HTML output. <-- ish.

Aside from the syntax (components, es5/6, JSX) I've found React relatively easy to pick up. (I like Vue better tho. =pppppp)

React for Beginners - Good course! I'm going through it right now.
Zac Gordon React Bootcamp - I took Zac's JS4WP bootcamp at the beginning of this year and it was worth every penny. Great setup, live lectures, exercises, and a Slack channel you can use to ask questions.

Docz of WP Gutenberg Components I used this site to muck about with React components and get a deeper understanding of how they work. (I also spent an evening poring over the Gutenberg repo to see how things were connected. XD)

(I know. Overkill. But I love sharing learning resources!)