React Basics — Component, JSX, Props, State, and more in detail
Admittedly, React is top of the front-end industry in 2020. It’s a very friendly library for beginners Lerner. So, let's try to understand some important basics with me.
Component
React component is a JavaScript function that returns a React element. It can't return “undefined” (either explicitly or implicitly). It has to return a value or null. On the other hand, the React component is a part of the user interface, template, blueprint & a global definition. This can be either a function or a class with a render method. Components are re-usable and can be nested inside other components. There are two types of components.
- Stateless Functional Component
- Stateful Class Component
Functional Component: Just a JavaScript Function that’s input some properties as props and returns HTML as a JSX.
This is an example of a Functional Component. I think it’s might not clear. Don’t worry a few steps later I will discuss more.
Class Component: It just an ES6 class and it input some properties as props and return null or some HTML as JSX. But it has some private internal state.
It seems to look like an ES6 class, right.
Function vs Class Components — Let’s have a look at some difference both of them.
JSX
JSX is an extension to JavaScript that allows us to write function calls in an HTML-like syntax. It is basically a compromise. Instead of writing React components using the React.createElement syntax, we use a syntax very similar to HTML and then use a compiler to translate it into React.createElement calls. When you use create-react-app, the generated app will internally use Babel to transpile your JSX. This syntax gets converted to for React but JSX can also be used on its own. It is not a React-only thing. JSX makes your React code simpler and elegant. JSX tags have a tag name, attributes, and children. JSX ultimately transpiles to pure JavaScript which is understood by the browsers. Let’s have a look at JSX's example.
As I said above, it is an XML-like code for elements and components. Tha’s why this code look like HTML. Let’s have a look without JSX in React.
Actually, behind the scene that has a bigger picture itself. ReactDOM.render is the entry point for a React application into the browser’s DOM. It has 2 arguments. First is WHAT to render (React Element) & the second one is WHERE to render (Valid DOM that exists in the statically rendered HTML). What exactly is a React element? It’s a VIRTUAL element describing a DOM element. It’s what the React.createElement API method returns. There are many arguments. The first arguments are HTML tag, second is any attributes (id, href, title, etc), the third argument is the content of the DOM element.
In my code, React.createElement method except for the minimum three parameters. The first parameters are HTML tags to render. The second parameters are attributes id & className. The last one is another React.createElement method that has also three parameters like ‘h1’, ‘null’ & ‘Hello Maruf’ (Children of the HTML element). If you understand this code a little bit maybe you have a question for why in this example we use React.createElement in two times. The hack is there is no away to create an HTML tag in one React.createElement method.
Let’s compare both of this example code and find out the beauty of JSX.
JSX Differences:
Class -> ClassName
for -> htmlFor
camelCase property naming convention
- onclick -> onClick
- tabindex -> tabIndex
Props
We know components are reusable. That is why when you create a component in your react app and you used this component any part of your React app.
In this example, within the App component, we use a ‘Greet’ Component, and it’s totally reusable cause we reuse in 3 times. So, when you reuse a component in that time ‘Props’ come out. Simply, ‘Props’ is short of properties. In-App component Greet has the name and Hero name property. These props get passed to the ‘Greet’ component and it receives an Object using props like the right side of the example. If you log your props argument in Greet component you get the output on browser console.
Though you have an Object. So, you can use it your own away with dynamically. Again look forward to our code, you see first and second ‘Greet’ we passed an HTML ‘p’ and ‘button’ tag with a text node through the ‘props’ property. After passing this tag Greet Component also receives it as a ‘props.children’.
State
It’s working concept is the same as props but the difference is state-managed within the component. Let’s have a look at some difference between props and state.
Ultimately both props and state hold information that influences the UI in the browser.
Look at the example of the code. Here, state is managed within the ‘Message Component’.
