As noted in my last post, I have been learning REACT and I actually enjoy it. I thought it would be complex but it really isn’t. It truly is JavaScript! What makes REACT seem complex to many, including myself in the beginning, is JavaScript XML( JSX), but it really isn’t as difficult as many may think.

In this post, I will break down the basics of REACT and try and shed a little light on JSX. To really understand REACT or JSX, I would recommend going to their site. Let’s get started with the famous HELLO WORLD example.

To begin, you need to make sure you have a reference to the right libraries to use REACT. The below is from the REACT site.

You will also need a reference to babel in your file which helps to convert JSX into JavaScript. The below reference is from the CDN site

You will need a reference to all three files in your html if you will be doing client side development in SharePoint.

For the ‘Hello World’ example, you will need a DIV tag with an id=’root’ in your html file. The id name can be any name you choose. In my example below, I chose to use ‘app’.

In your JavaScript file, you will use REACT to define what needs to be rendered in your div. You do that by using

ReactDOM.render(argument1, argument2);

argument 1 is the what (what will be rendered to the page)
argument 2 is the where (where will your what be rendered to), which will be my div of id=app

In the example above, argument 1 is <h1>Hello World!!!</h1> and argument 2 identifies where argument 1 will be rendered to by using document.getElementById(“app”)

argument 1 is JSX even though it looks like HTML. It is really an extension of JavaScript. The babel library helps to compile it to JavaScript. You can also embed expressions in JSX just as you see in the example below that I copied from the REACT site.

There is a whole lot that you can do with REACT. The power of REACT comes when you learn how to use components and props.

I hope you enjoyed and learned something from this post. Make sure you stop by the REACT site and also check out my videos on my channel on how I use it with SharePoint. I also provide the github files with my videos. If you have any questions, please leave your comments.

REACT SharePoint REACT SharePoint