Lanka Developers Community

    Lanka Developers

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Shop

    React JS Intro

    Front-End Development
    react-js react
    7
    8
    1703
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • dev_lak
      dev_lak last edited by dev_lak

      0_1545988991425_reac.png

      What is React JS

      • React is a JavaScript library for building user interfaces.

      React Components

      • Everything in React is a component, and these usually take the form of JavaScript classes. You create a component by extending upon the React-Component class.
        Eg:

        class MyComponent extends React.Component {
            render() {
                return <h1>Hello world!</h1>;
            }
        }
        
      • You then define the methods for the component. In our example, we only have render() method.

      • Inside render() you’ll return a description of what you want React to draw on the page. In the case above, we simply want it to display an h1 tag with the text Hello world! inside it.

      Props and States

      • There are two types of data in React: props and state.

      • The key difference is that state is private and can be changed from within the component itself. Props are external, and not controlled by the component itself. It’s passed down from components higher up the hierarchy, who also control the data.

      • The difference between the two is a bit tricky to understand in the beginning, so don’t worry if you find it a bit confusing. i'll show you how to work with props and states in the next tutorial.

      Setting Up

      • First create a .html file

      • Then import react like below

        <!-- ... other HTML ... -->
        
          <!-- Load React. -->
          <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
          <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>    </script>
          <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        
        </body>
        

      Add a DOM Container to the HTML

      • Add an empty <div> tag to mark the spot where you want to display something with React. For example:

        <!-- ... existing HTML ... -->
        
        <div id="save_button_container"></div>
        
        <!-- ... existing HTML ... -->
        
      • We gave this <div> a unique id HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.

      Creating a React Component

      • Create a file called save_button.js next to your HTML page.

      • Add below code to save_button.js file

        'use strict';
        
        const e = React.createElement;
        
        class SaveButton extends React.Component {
          constructor(props) {
            super(props);
            this.state = { saved: false };
          }
        
          render() {
            if (this.state.liked) {
              return 'You saved this.';
            }
        
            return e(
              'button',
              { onClick: () => this.setState({ saved: true }) },
              'Save'
            );
          }
        }
        
        //These two lines of code find the <div> we added to our HTML in the last step, and then display our “Save” button React component inside of it.
        const domContainer = document.querySelector('#save_button_container');
        ReactDOM.render(e(SaveButton), domContainer);
        

      Loading our React Component

      <!-- ... other HTML ... -->
      
        <!-- Load our React component. -->
        <script src="save_button.js"></script>
      
      </body>
      
      • Open the .html file you create using your favourite browser and you will see something like below:

      0_1545987958832_d79088ee-6b1c-4907-a2d8-1bdf0470a236-image.png

      Full Example

      • index.html

        <html>
        <head>
            <title>React App</title>
        </head>
            <body>
                <h1>Welcome to my React App</h1>
                <div id="save_button_container"></div>
        
                <!-- Load React. -->
                <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
                <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
                <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        
                <!-- Load our React component. -->
                <script src="save_button.js"></script>
            </body>
        </html>
        
      • save_button.js

        'use strict';
         
        const e = React.createElement;
         
        class SaveButton extends React.Component {
          constructor(props) {
            super(props);
            this.state = { saved: false };
          }
         
          render() {
            if (this.state.liked) {
              return 'You saved this.';
            }
         
            return e(
              'button',
              { onClick: () => this.setState({ saved: true }) },
              'Save'
            );
          }
        }
         
        //These two lines of code find the <div> we added to our HTML in the last step, and then display our “Save” button React component inside of it.
        const domContainer = document.querySelector('#save_button_container');
        ReactDOM.render(e(SaveButton), domContainer);
        

      Thanks for reading, in the next tutorial i'll talk about

      • Props and States
      1 Reply Last reply Reply Quote 6
      • Nubelle
        Nubelle Web Development last edited by

        Thanks @dev_lak

        1 Reply Last reply Reply Quote 1
        • lkdev
          lkdev last edited by

          Good Explanation, react is the future of web frontend

          1 Reply Last reply Reply Quote 2
          • F
            fern Node.js last edited by

            Nice article... thanks bro

            1 Reply Last reply Reply Quote 0
            • isuru mahesh perera
              isuru mahesh perera last edited by

              React <3

              1 Reply Last reply Reply Quote 0
              • dileepanipun
                dileepanipun last edited by

                Thanx for this. ✌️

                dev_lak 1 Reply Last reply Reply Quote 0
                • dev_lak
                  dev_lak @dileepanipun last edited by

                  @dileepanipun welcome machn..

                  1 Reply Last reply Reply Quote 1
                  • rachitha
                    rachitha last edited by

                    Thank you

                    1 Reply Last reply Reply Quote 1
                    • 1 / 1
                    • First post
                      Last post

                    0
                    Online

                    3.6k
                    Users

                    1.3k
                    Topics

                    5.3k
                    Posts

                    • Privacy
                    • Terms & Conditions
                    • Donate

                    © Copyrights and All right reserved Lanka Developers Community

                    Powered by Axis Technologies (PVT) Ltd

                    Made with in Sri Lanka

                    | |