Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

Follow me @ Twitter, Instagram & fb to never miss premium articles.

To get a good idea of how flex works try flex layout editor on this page.

In React “props” is short for properties. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.

I’ll demonstrate this principle using a JSX example:

<Element hello_i_am_a_prop = "1" />

This “hello_i_am_a_prop” (or whatever you came up with) name then becomes a property attached to React’s native props object which originally already exists on all components created using React library.


Within React Component definition, these attributes then become properties attached to the React’s native props object within component’s constructor. But these props also become available inside the component’s render method as well.

When starting out, these are the two common places you will use to access or “intercept” values stored in props object which was passed into your React component during creation.

class Element extends React.Component {        // Component's constructor
constructor(props) {
// Required to call original constructor
// Props are now accessible from here
var v = props.hello_i_am_a_prop;
// This is called when ReactDOM.render is called on <Element />
render() {
// And from here
return (<div>{this.props.hello_i_am_a_prop}</div>)

In this React props tutorial we’ll learn what props are whether JSX is used or not. We’ll also cover a few other practical examples just to see what props actually help us accomplish.

Subscribe to be notified of new React Tutorials < here.

Using “props” without JSX

Note that it is possible to use React props without JSX. However using React props with JSX is the preferred method, but it requires babel plugin.

If you are working outside of production environment and cannot use babel, you are going to have to live with non-JSX syntax, which is simply ES5 (EcmaScript 5) JavaScript functions with JSON. It is briefly covered later in this section.

Continue reading at my React.js Tutorial site:

Original article:

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

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