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
class MyFirstReactApp extends React.Component {
  render() {
    return <h1>This is my first react component class, {this.props.name}</h1>;
  }
}
  • We can define React component function as
function MyFirstReactComponent(props) {
  return <h1>This is my first react component function, {props.name}</h1>;
}
  • 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
<!DOCTYPE html>

<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js">
   </script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js">
   </script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">
   </script>
</html>
  • 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
<body>
        <div id="reactdiv"></div>
</body>
  • Now we will write actual React component. As discussed React component is derived from React.Component as
<script type="text/babel">
            class MyFirstReactApp extends React.Component
            {
            }//class
 </script>
  • 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
      <script type="text/babel">
            class MyFirstReactApp extends React.Component
            {
                render()
                {
                    return <h1>My First React App Testing</h1>
                } //render method
            }//class
      </script>
  • 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
ReactDOM.render(<MyFirstReactApp/>,document.getElementById('reactdiv'))
  • 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 :
<!DOCTYPE html>

<html>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <body>
        <div id="reactdiv"></div>

        <script type="text/babel">
            class MyFirstReactApp extends React.Component
            {
                render()
                {
                    return <h1>My First React App Testing</h1>
                } //render method
            }//class
            ReactDOM.render(<MyFirstReactApp/>,document.getElementById('reactdiv'))
        </script>
    </body>
</html>

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.