React developer tutorial #3 Props ultimate guide

Welcome back to React developer tutorial part 3. This is a react tutorial series where I teach you on react all the way from scratch till then you become a professional react developer. If you have not checked out the previous parts then do read them first. Now without taking any time let’s jump right into it.

Today’s agenda

Today we will be covering how to communicate with props and learn how react renders . You will be learning props from scratch by building a simple small application.

Rendering Elements

Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen. To render any element you call the method ReactDOM.render . Go to your previous application you have created in the previous application and then go to index.js file in the src folder. You will clearly see what is going on. you call ReactDom.render() and inside the braces you put the app component that you imported from app.js file. and then you called the function document.getElementbyId function which then grabs the div element which has a class id of (“root”). This means that ReactDOM.render() function takes two parameters one which needs to be rendered on the screen and second that where it needs to be rendered.

Now you may have a question that where is this root element. I have a solution to this question. Open up public folder and there you will see index.html file. Open it and there you will see a div with a class of root. That is the place where all our react code gets rendered and then the index.html file gets rendered on the browser.

Introduction To Props

Now open up your react application that we have created in the last lecture. Now open up your app.js file where we will start coding. Delete all the code in the div which has a classname of app. This app component (Components let you split the UI into independent, reusable pieces, and think about each piece in isolation) can take props as a input. Now let me tell you what are props. Props you can say are attributes which you can pass into react components. To declare props in react you would type props in the brackets after the function name.

writing the keyword props in function app

. Now let’s actually use props. In order to have access to props in the component you can write props. and after dot you can specify the name of the prop you want to grab. You can provide any name you want but just follow the convention. What I mean by convention is write proper meaningful names. Now inside the div element provide a h1 tag and inside the h1 tag access the prop called name. make sure to first put {} in h1 tag and then access the prop name. Make sure to save the file every time you change the code. Now go to index.js file and then write down the name prop to any string value you want in reactdom.render method.

passing the prop while rendering the app component

Now run npm start command in your terminal to run the application and you should see you name on the screen. So this is the props basic. Now let’s make something more complex with props. Write the following lines of code in app.css ,app.js and index.js

app.css
app.js
index.js

Now run this code and see what is going on. I am not going to discuss as it is a task. If you figured out what is going on then congratulations but if you didn’t then don’t worry you will surely understand it while creating some advance projects.

Some more about props

Till now we are declaring props as a whole. Meaning that we can declare a prop of any name. You can also specify the prop name instead of passing props as a whole. If you declared the name of a prop particularly then you can access the prop inside of the function by just calling the name of the prop. See the example given below.

You can see that I have declared props name and age separately. One thing to note here that in the brackets I have first put {} and then declared the props. When you declare props like this then you don’t have to access it by using props. , You can just call out the name of the prop

Conclusion

This is it for this article. I hoped you learn something new. Let’s just describe the summary of what we did. Today we learned how react renders component using ReactDOM.render which takes two arguments. The first argument is the component we want to render and the second argument is where we want that component to render it. Then we discussed props and how to use props. We first declare props at the beginning of the function and then access it by using props. and then the name of the prop but if you have declared the name of the prop then you can just simply call them. Thankyou for reading this story and I would see you in my next post.

I AM A FULL STACK FRONT-END WEB DEVELOPER AND TEACHES PEOPLE WEB DEVELOPMENT AND I AM ALSO A FREELANCER AND HAVE A PART-TIME JOB