October 23, 2020
React Js Props And Components Tutorial

React Js Props And Components Tutorial

Knowledge of react js Props and Components is primary in react js tutorial. right after You have installed react js, you should directly begin writing code with knowledge about props which stands for properties and components too. The core understanding of principles takes a long way in coding. React js was brought to eradicate a limitation. Among them one was to bring isolated pieces of code, so that unit testing is possible. Even the angular is built entirely on the principle of Components, unit testing, and dependency injection. Here, in this tutorial we are focusing on front-end application development, so we will create a component and render the component. after the dom is loaded. Here, we will load a list and pass the parameters as props in react js where right now though we have not introduced forms would be passed statically only. And don’t forget to code on your own than coy paste as it will enrich your knowledge and boost the confidence of creating something on your own. So, let’s get straight into the coding!!

React Js Components

React Js allows to isolate sections of UI by marking them as Components. This feature has allowed to write cleaner code and faster updation by following virtual DOM structure. Because we are talking utmost basics here, the code below can be added just after you have installed a react js app. Though if you are using react js as a library in existing HTML code, this still works where you have to write the code in javascript.


The below two codes are equivalent in react as classes are inherited from   React.Component so, react classes are react’s components only. Here, we create a component or function or class called Friend which return the parameter that is passed in JSX. That Parameter is react js props which will discuss in detail below though. Now, you have to write this code in the app.js file of the folder. And, rendering the code in index.js. Now, if you are using react js as a library you can definitely go ahead and write on the same page.

React Js Props And Components Tutorial


Both the code depicts the same but we will use above one as the below portion is elaboration of the same.

React Js Props And Components Tutorial

Thats where you would call the component in app.js file .



React Js Props

Passing parameters from HTML to functions which in react js props is called as passing props in JSX to components where components return a view in the form of JSX or HTML. Here, we have passed a state value=”Priyanka”, but usually you would work with forms which will discuss later because many of you would get intimated by it. Make sure to run the code on your own than copy paste it.

React Js Props And Components Tutorial

Render portion is written in index.js file where we pass the app.js class

React Js Props And Components Tutorial

This is how the output would look like on npm start.

Hope, you have got the hand of react js props and react js components as components are classes only extended by react.Component Interface to isolate sections of code and prop are parameters you pass from JSX to the component. So, this was a short tutorial on react js props.

Similar Posts:








Engineer Diaries started with the need to bridge the huge gap in what we are taught vs what the industry demands. We are based in Delhi, India but our blog is for everyone, in and outside tech industry❤ Feel free to reach out to us at engineerdiaries@gmail.com for any business/personal query.

View all posts by admin →

Leave a Reply