Setting up react environment.

What is React?

React is basically a Javascript library for better , efficient & easily manageable user interface. 

If you are familiar with Javascript, you can directly start working with React using their documentation.

https://reactjs.org/tutorial/tutorial.html

They have already provided Codepen editor in order to directly work online.  Although, for security reasons you do not want to work online with their editor, you have to setup your own environment to work with react. That is what we will discuss here.  First lets know more about React, how you can Render your html element inside a div.

It has efficient way of managing variables, elements inside class.  Working with inline react js code is pretty easy task. You can do it easily by including some source file and start writing like code given below




We will face problem while doing it with separate react js file. So for that we need our local system working environment. What you need to do is to make your system server . I have used MAMP (https://www.mamp.info/en/downloads/) for this purpose.

1) Without any delay just download and install MAMP. It will provide you localhost to work with.
2) After installation launching MAMP will show you dialog like given below to start server.

3) Click on Start Server will launch your browser with localhost url . It means MAMP is working fine. Your browser will look like image provided below.

4)  Now you need to find htdocs folder to place your project folder. As I am setting up in Mac OS X. My path is   /Applications/MAMP/htdocs. In windows you can find it inside C:/MAMP/htdocs. 
5) Create two files named index.html and script.js. Some of basic points to be noted while writing code inside script.js file.

  a) Do not miss following piece of comment at the top of file while working with React js. Without this, your code won't work . It may seem to be commented but this commented code actually works.

  /**
   * @jsx React.DOM
   */

  b) While including this js file to your index.html file. You need to define specific type for file i.e; text/babel 

Ex:-  <script src="script.js" type="text/babel"></script>

6) Decompose your previous code to two pieces. It means divide it in two files that is write your html code inside index.html file and js code is separately in script.js file. Now your files will look like code given below.





7) Create a folder named SAMPLE -> place these files inside that folder.  And Place SAMPLE folder inside your htdocs folder.
8) Open your browser and type http://localhost:8888/SAMPLE. Your running project will look like screenshot given below.