Introduce with React JSX and props

JSX

What is JSX in react?

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write down and add HTML to React. JSX is not a requirement for using React. … Each JSX element is simply syntactic sugar for calling React. createElement(component, props, …children) . So, anything you’ll do with JSX also can be through with just plain JavaScript.

Why JSX?

• It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
• It makes easier for us to create templates.
• Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in details in further articles.

Attributes in JSX

JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But instead of the normal naming convention of HTML, JSX uses the camelcase convention for attributes. For example, class in HTML becomes className in JSX. The main reason behind this is that some of the attribute names in HTML like ‘class’ are reserved keywords in JavaScripts. So, in order to avoid this problem, JSX uses the camel case naming convention for attributes. We can also use custom attributes in JSX. For custom attributes, the names of such attributes should be prefixed by data-.

Wrapping elements or Children in JSX

Consider a situation where you would like to render multiple tags at a time. To do this we’d like to wrap all of this tag under a parent tag then render this parent element to the HTML. All of the subtags are called child tags or child of this parent element.

Comments in JSX

JSX allows us to use comments as it allows us to use JavaScript expressions. Comments in JSX begins with /* and ends with */. We can add comments in JSX by wrapping them in curly braces {} just like we did in the case of expressions

Naming Convention

HTML tags always use lowercase tag names, while React components start with Uppercase.

Note − You should use className and htmlFor as XML attribute names instead of class and for.

React Components

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function.

Create a Class Component

When creating a React component, the component’s name must start with an upper case letter.

The component has to include the extends React. The component statement, this statement creates an inheritance to React. Component, and gives your component access to React.Component’s functions.

The component also requires a render() method, this method returns HTML.

examples:

class Car extends React.Component {

render() {

return <h2>Hi, I am not a robot!</h2>;

}

}

Create a Function Component

A Function component also returns HTML, and behaves pretty much the same way as a Class component, but Class components have some addition.

examples:

function Car() {

return <h2>Hello!</h2>;

}

Props

Props are like function arguments, and you send them into the component as attributes. React Props are like function arguments in JavaScript and attributes in HTML.

examples:

const myelement = <Car brand=”Ford” />;

The component receives the argument as a props object:

class Car extends React.Component {

render() {

return <h2>I am a {this.props.brand}!</h2>;

}

}