React.js Elements Tutorial

Continue reading this article at: React.js Elements tutorial via the original site ReactJSTutorial.net and subscribe for more tutorials.

Image for post
Image for post
I still can’t believe Dan Abramov retweeted my book — I sent him a free PDF copy :) This might not be 100% React-related but grab a copy of CSS Visual Dictionary — A desk reference for visual learners.

In JavaScript almost everything is an object. Likewise in React everything is a React Element. React Elements are the building blocks of a React program. If you’re writing one from scratch, the first thing you’ll be doing is creating a React Element.

If you prefer video tutorials I created this React Elements Tutorial on YouTube. It’s running length is just 6m:12s and it’s pretty much the same (actually a bit less) of what you’ll read here on this page.

But be careful, React Elements can manifest themselves in different ways. First and foremost as ReactElements created using React.createElement function, but also as JavaScript functions, objects, React Components and JSX statements. Which makes them sort of like a wolf in sheep’s clothing. In this tutorial however we’ll start simple. So don’t worry about all those things yet!

A React Element is an abstract mental model of an HTML element, that can be represented by multiple JavaScript data types. This data-type transcendental nature of React Elements is the key feature of understanding React programming.

What Is A React Element?

When writing HTML, you enter tag names, attributes and their content (innerHTML). But React helps you do that in JavaScript. In fact, some React code is comprised of HTML tags typed directly as JavaScript statements using babel JSX transpiler.

We’ll get to that in a bit, but for now think of React Elements as “programmatically created” HTML tags, doing which makes working with them much more efficient, directly from your JavaScript program!

Continue reading this article at: React.js Elements tutorial

via the original site ReactJSTutorial.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store