Explain React to Me

twitter logo github logo Updated on ・1 min read

Explain JavaScript (5 Part Series)

1) Explain React to Me 2) Explain Vue to Me 3) Explain Angular to Me 4) Explain the Frontend Webdev Ecosystem to Me 5) Explain the State of WebAssembly 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?

twitter logo DISCUSS (25)
markdown guide
 

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.

 

"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."

 

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.

 

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, ...).

 

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.

 

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.

 

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."

 
 
 

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.

 

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!

 

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

 

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!)

 

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.

 

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

 

We used design patterns like the Revealing Module pattern to separate and organize code and to decide what was private or public. We used design patterns like Observer to help us modify the UI based on data structure changes. We used objects and arrays to store and share data. We used ajax to sync with backend data store and server side platforms. We used window.location object to write simple route management.

 

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

 
 

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. 😁😁

 

Probably come late here but I have a question too:

is React becoming simpler or more complicated?

 

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

 
 

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!

 
Classic DEV Post from Mar 23

Thing's I've learned so far starting an open source project - March 2019

A collection of thoughts on what I have learned so far since starting my open source game "company" this year.

Ben Halpern profile image
A Canadian software developer who thinks he’s funny. He/Him.

dev.to is where software developers stay in the loop and avoid career stagnation.

Sign up (for free)