DEV Community

Ben Halpern
Ben Halpern

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?

Discussion (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 on

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 on

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
sag1v profile image
Sagiv ben giat

(state) => UI

Collapse
skydevht profile image
Holy-Elie Scaïde
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!)

Collapse
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

React is a non-standard, userland rewriting of a subset of the web-components specifications.

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
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
roggc profile image
roggc

From my point of view, react is awesome. As they have said it's all about functions which at the end returns markup to render or update, based on props and state. State is like data kept in memory which you can use to determine function behaviour. You can lift up state and pass it down through props in order one component interacts or affect another. Flow is always downwards. If you define state locally there is no way this information goes up in the tree hierarchy. It is for this reason lifting state up. You can do test driven development with react. React is simple but powerfull.

Collapse
jeromedeleon profile image
Jerome De Leon

React is like a LEGO where you can build amazing things like airplane, cars or your own house together with your friends and what's more? it's free.

Hope I explain it to you like your five. 😁😁

Collapse
pranjalagnihot8 profile image
Pranjal Agnihotri {..❤️}

This is not a answer which explains React, but can anyone tell me how we did data management on client side before React, Redux?.

Collapse
antonmelnyk profile image
Anton Melnyk

Before that we managed data on the backend and there wasn't much happening on the frontend besides some jQuery here and there.

Collapse
dinsmoredesign profile image
Derek D

You used the DOM.

Collapse
varjmes profile image
james • Edited on

Building small composable parts of your user interface, where each can manage their own existence in the world.

Collapse
rhymes profile image
rhymes

Probably come late here but I have a question too:

is React becoming simpler or more complicated?

Collapse
ajonp profile image
Alex Patterson

I can't but Tyler can!
link.ajonp.com/tylermcginnis-react

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
ben profile image
Ben Halpern Author

Please?

Collapse
yawaramin profile image
Yawar Amin

To expand a bit on a tweet: twitter.com/yawaramin/status/11900...

View is a function of state and props, views can contain hooks which update state. Conceptually, that's about it!