React JS for beginners

Hi All,

LIFE IS BEAUTIFUL ðŸ™‚ I hope we all are safe ðŸ™‚ STAY SAFE, STAY HEALTHY  STAY HOME ðŸ™‚

Today bit different article since I submitted session for React Virtual Conference, so I am preparing for it and this article has birth 🙂

Note : You will find lots of articles on React but still I’ll be writing from my side and by my way (dont want to reinvent the wheel :)) and in upcoming articles I need to explain with SharePoint for SPFX component.

Take away from this article :

  • What is React
  • How React works 
  • What are React Components
  • Starting with React – creating first simple React App

Prerequisites :

  • Basic knowledge of HTML
  • Basic knowledge of JavaScript
  • Basic programming concepts – Functions, Classes, Arrays etc.
  • Basic understanding of DOM

What is React :

  • JavaScript library for building User Interfaces
  • Very popular library
  • React is an open-source project created by Facebook
  • React is the view layer of an MVC application (Model View Controller)
  • React is used to build single page applications
  • React allows us to create reusable UI components

What are React Components :

  • Custom, reusable HTML elements
  • These are like JavaScript function which accepts input and returns React elements – what should be shown on UI
  • Components allows us to update the content on the page without refreshing the complete page
  • These components are defined as either classes or functions
  • We can define React component class by deriving from React.Component as
  • We can define React component function as
  • The above react component function accept parameter – “props” – properties object argument.

Starting with React – writing our first react app – Creating simple react app : Simple way to start and understand react is crate html file, create a react component and render. Lets have following sample .html file

Choose the IDE of your choice and install. I prefer Visual Studio Code – Microsoft’s open source IDE. You could download it from – https://code.visualstudio.com/

  • Create HTML file – “myfirstreactapp.html” and include three scripts from cdn as
  • First two scripts allows us to include React code in our JS file. First library is for React top level APIs and second is for manipulating DOM-specific methods
  • Babel is JavaScript compiler. This compiler is used to convert one source code to another. This compiler enables us to use new ES6 (ECMAScript 6 – ECMA script was created to standardize JavaScript. ES6 was the 6th version of ECMAScript) feature in old browser by converting new code to plain old ES5
  • Include <body> element and add <div> element which will be rendered on the UI as
  • Now we will write actual React component. As discussed React component is derived from React.Component as
  • script type “text/babel” is mandatory for using Babel.
  • React component implements render() method which returns the react element – which is shown / rendered on the UI as
  • Once we have render() method ready, we need to call ReactDOM.render(). This method is used to render react app / component in root DOM node , here we are passing two parameter – React element – HTML code and HTML element in which we need to render react element
  • We are using component like HTML tag in ReactDOM.render()
  • Best Practice :
    • Component name should be in PascalCase. For ex. in our code we have component name My First React App should be MyFirstReactApp
  • Complete code :

How React works :

  • React uses virtual DOM. It wont directly uses regular DOM.
  • Since React creates virtual DOM in memory, it improves performance
  • React does all required manipulation in virtual DOM and then update browser DOM

Next article – In next article we will discuss one more approach to start with React and few more details. We will use “create-react-app” to create our React app

References :

Thanks for reading ðŸ™‚ Feel free to discuss / comment / questions. SHARING IS CARING ðŸ™‚

Share In Teams:

Enjoy the beautiful life ðŸ™‚ Have a FUN 🙂 HAVE A SAFE LIFE 🙂 TAKE CARE 🙂 

One thought on “React JS for beginners

This site uses Akismet to reduce spam. Learn how your comment data is processed.