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)
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
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
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."
React Podcast
How I understand React
Holy-Elie Scaïde ・ Oct 10 ・ 3 min read
(state) => UIEasy: 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!
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.
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!)