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 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’.
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”)
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.