React developer’s tutorial #2

Welcome back to React developer’s tutorial part 2. This is a react tutorial series where you learn react all the way from scratch. In the previous tutorial we have created our first react application. Now it is time to move it further. In this lesson we will be learning JSX.

JSX

this piece of code is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. it comes with the full power of JavaScript. It is just like html and javascript. There is only a little difference. In this lesson we are gonna learn JSX to build user interface

WHY JSX?

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. React separates concerns with loosely coupled units called “components” that contain both. We will come back to components later when we build our first real-world project.

Writing jsx

Jsx is just like html. There are only small differences between JSX and react. For example in html we declare any elements classname by calling class but in jsx we call className instead of class. Also if we can write some javascript code in jsx. Now let’s write our first JSX. Now open up a new pen on codepen on codepen.io .

Now in the HTML section write the following line of code

After you have write down the following piece of code, copy it and then open up your react application we have created and open app.js file in the src folder. then paste the line of code we have created in codepen. Your app.js file should look like this

make sure to delete the content in the div component and then paste the following line of code in the div. Now run your application using command npm start . npm start command run’s a react application. when you will run your application then you should see a error on the page similar like this.

I will not deep dive into this error but yeah to solve this just delete the inline styling we have provided for the button in app.js file. Now save the file and you should see something like this on your localhost:3000

You can see that your application is running as expected but click inspect element on the screen and go to console log and you will see some errors.

I will focus on two main errors and how to solve them. The first error is index.js:1 Warning: Invalid DOM property `class`. Did you mean `className`? This error means that you have to write className instead of class. Recall that I have told you that in jsx you write class as className so instead of writing class write className in the place of class. Now if you clear the log and refresh your application then this error would be removed. Remember to save your code by clicking command + s if you are on mac or ctrl + s if you are on windows

let’s move on to second error which says index.js:1 Warning: Invalid DOM property `for`. Did you mean `htmlFor` . Now I want you to fix this error by your self and if you failed then don’t worry. I am gonna tell you how to fix this error. This error says that you should write htmlFor instead of using for in the label tag. So change the for prop of label tag from for to htmlFor. Quick note here that be careful with capitalization. It is very important. Also I want to tell you that these changes are not necessary but it would remove the errors and if you don’t follow this jsx syntax then it would be very difficult to work with complex react applications later on.

A question I always get from students is that how we get to know which property is correct in JSX and which is not. Take the example of className property. Well you can always see the console and find the errors. Read them and then fix them. It would be not difficult. Also when you will start working with react for a little bit more longer then this problem will not come. Now recall that when we added inline styling to our button tag then we got an error. So now the question is that how we can add inline styling in JSX. To add inline styling in JSX you have to put double {{}} and then add styling property to the tag instead of using “ ”. Now add the previous styling of the button while using this syntax. You will see your react application working amazingly.

Also if you want to add a new property of styling to the tag then put a , instead of ; and then save the application. You can see the example in the picture given below

Declaring variables in JSX

Now we will learn how to declare and use variables in JSX. Declaring variable in JSX is simple. Write down the following lines of code in app.js file.

Note down here that I have declared the two variables not in the return function but outside of it. This is because if I declared the two variables inside of return then it would give us an error because return function returns something which is displayed on the screen. For declaring variable in JSX ,first you have to use keyword const and then write the name of the variable. After that you assign a value to your variable by first putting = sign and then put the value after that. You can assign a variable any javascript expression you want. To access the variable put {} and then inside the curly braces add the name of your variable. See the variable element as a example. I have access the variable name inside the variable element. You can console.log the variable if you want.

Values JSX can’t show

Although JSX is very powerful there are some limits of JSX. You cannot access objects in variables. You can try out this . Just change the element variable value to {text:”hello”} and then change the text inside the label tag to element variable by putting {} inside the label and then inside these brackets put the element in it.

Conclusion

So this is it for this lesson. In this article I have covered the basics of JSX, it’s syntax and how to declare variables in JSX. So thankyou guys for reading this article. I hoped you learn something new in this lesson. Now I will see you in the next lesson

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