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
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.
Both the code depicts the same but we will use above one as the below portion is elaboration of the same.
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.
Render portion is written in index.js file where we pass the app.js class
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.