Some React things that you need to know

Is React js a framework?

The first thing react js is not a programming language it is a javascript library. Which is used for building a user interface. Here library means a collection of codes, by reusing that we can make our application.

Similarly react is a collection of vanilla js codes by reusing that we can make web, mobile apps even make the desktop application.

React is not a framework it’s basically front end based library that allows you to quickly create web and mobile apps. And it’s an open-source platform.

JSX

JSX is a JavaScript syntax extension that has been added for the benefit of developers. It stands for javascript XML. It allows writing HTML in React. The main function of JSX is to create the element of React.

It provides syntactic sugar for the React.createElement(component, props, …children) function.

Look at the code below —

const RootElement = (
<div>
<h1 style={{color: blue}}>The world is yours</h1>
<p>Say hello to react js</p>
</div>
)

Now look at this :

const rootElement =
React.createElement(‘div’, {},
React.createElement(‘h1’, {style: {color: ‘blue’}},
‘The world is yours’),
React.createElement(‘p’, {},
‘Say hello to react js’)
)

See how complex the code looks like a normal HTML code. In your React app, You can use this complex version. But it is wise to use well-arranged JSX syntax.

Component

Component is the building block of the react. We can compare it with the parts of a machine. We can customize and use them if we want. The component in React is usually a class or function of JavaScript.We can keep the components in separate files.

It can keep the code clean in a file which is very convenient for later bug fixes and adding new features.

Inside a component determines how the contents inside will be displayed in the browser.

The component in the react can be of two types:

1. Class component

Example :

class person extends React.Component {
render() {
return <h1>Hi, I am Shajjad.</h1>;
}
}

2. Functional component

Example :

function person() {
return <h1>Hi, I am shajjad. </h1>;
}

Props

Into react components props are read-only arguments passed way which is used for handling the properties of a component. Props are immutable in how you pass data from one component to another, as parameters.