Part 1: React JS ?

React is JavaScript library used to build highly reactive superfast user interface, with less piece code you can achieve reach user interface. It is most popular JavaScript library developed by Facebook in 2011.
Angular, Vue.js and few more are alternative for React. Angular JS is framework based whereas React is JavaScript library easy to learn faster and rapid.
React component : React is all about react component. It is piece/block of UI (html syntax) reused in many html pages. It gives flexibility and maintainability for larger team. Html page can be divided into components and that component is referenced in html page. Let’s understand with example, suppose below is browser page which is divided into three parts Header, Navigation Menu and Main Content and each section (header, Navigation or Content) is component is react.

Before working with react application, need to set up environment like NodeJS should be installed, IDE like visual studio code. Will do environment set up later before I just want you to walk you through Codepen where Front end developers can write code and check it quickly.
Let’s Jump into Code pen shown below. Open browser window and type https://codepen.io/ or search code pen on Google.

Make sure you have signed in on Codepen and click on Pen sidebar highlighted. It opens below windows with Html, CSS and JavaScript section to allow you to write code.

As we discussed react is JavaScript library and need to reference before writing react code. Click on the icon marked in red colour above and add react and reactDOM libraries.
1. react : it is JavaScript library used for writing component in react JS
2. ReactDom : It is library which render component to actual HTML DOM element.
3. Select Babel as JavaScript Pre-processor

Babel is Next generation JavaScript compiler which helps to understand html syntax in JavaScript.
JSX with Babel allow you to write Html code in react(JavaScript). JSX stands for JavaScript XML.
Let’s implement Hello World in React using CodePen.

Page divided into three parts Html, CSS and JavaScript.
To render component on Html page react uses 'ReactDOM.render' method. Which simply attach h1 tag into Html div element with the help of div id(employee).
ReactDOM.render([HTML elements], document.getElementById('employee')); I didn't created component yet, actually I provided h1 tag directly in render method but render method also accept component and not just simple html tag. I will show you in next article.