All you need to know about react js

"JavaScript Library for building user Interfaces"

Little bit of history:-

Original author of reactjs is Jordan Walke. Development of this new library was started in March 2013 and stable release was released in September 6, 2018. This is a cross platform framework developed on JavaScript.

The idea behind development of this language was to make component driven framework which gives new directions to user interface development, it mainly focus on logic and reuse ability of components.

Some advantages of writing applications in react js.

• It runs in the browser itself so, no need to wait for server response. One can make user interface work smoothly as reactjs allows you to render components without depending on server calls. Earlier we used to get rendered pages  from the server and browser used to display it but now pages are rendered in browser which is undoubtedly the best thing which can happen. 
• As said earlier, it is a Java Script  library for building user interfaces. If we take any web page it consist of multiple components like header component, headline component, sidebar component, footer component and so on. So these components are present on every page and almost on every website, reactjs allows you to define those components as a function which are made only once and can be rendered on any page as per requirement which increases code quality and code re usability, isn't that cool.
• It's already on a stable release that means we have version which is properly tested and can be used for writing the production applications.
• Rectjs is backed by a large community support which is the most important aspect that one should consider at time of writing applications in particular language or framework. Large community helps you to get solutions of the problems, which you face at time of development, quite easily, there are also chances that you might find packages which can be easily plugged into your code and you work is done. Reactjs is quite famous and have large community support. Here is link to git repo which contains reactjs popular collections git hub link for popular react packages.

Basic Requirements to setup reactjs

• Since ReactJs is written in JSX format,  therefore to understand this format I would recommend one to use babel compiler which I will be covering in my future blogs. This compiler is supported by almost all modern browsers.
• We need to have reactjs imported in  our page and react Dom which is used to render html components.

Let have a very basic tutorial in reactjs lets do this in code pen:-

1. Create a new pen by going to create -> new pen in code pen after that you will be landed up with the page where you will have three editors one for html, second for css and third for JavaScript.
2. Go to js setting by clicking on settings icon next to js  pop up will open, select babel as a pre-processor from drop down.
3. In the same popup of js setting add reactjs cdn path and reactDom cdn path here are paths:-https://unpkg.com/react-dom@16/umd/react-dom.development.js, https://unpkg.com/react@16/umd/react.development.js .After addings close settings popup.
4. In js editor create a component as follows:- 

       
function Person( props ){
      return (
          <div className="person">
            <h1>Hello {props.name},</h1>
            <h2>Welcome to reactjs</h2>
          </div>
           );
      }

ReactDOM.render(<Person name="anshul"/>, document.querySelector("#p1"));
       
 

   

5. In HTML editor create a div block with id as p1 like this

       
            <div id="p1"></p1>
       
 

and your component will be rendered

Here is the link to example Hello Reactjs