<![CDATA[React JS Intro]]>

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
]]>https://lankadevelopers.lk/topic/59/react-js-introRSS for NodeTue, 08 Sep 2026 08:54:35 GMTFri, 28 Dec 2018 09:22:51 GMT60<![CDATA[Reply to React JS Intro on Wed, 15 May 2019 04:28:30 GMT]]>Thank you

]]>https://lankadevelopers.lk/post/1519https://lankadevelopers.lk/post/1519Wed, 15 May 2019 04:28:30 GMT<![CDATA[Reply to React JS Intro on Mon, 13 May 2019 17:17:16 GMT]]>@dileepanipun welcome machn..

]]>https://lankadevelopers.lk/post/1512https://lankadevelopers.lk/post/1512Mon, 13 May 2019 17:17:16 GMT<![CDATA[Reply to React JS Intro on Mon, 13 May 2019 15:42:19 GMT]]>Thanx for this. ✌️

]]>https://lankadevelopers.lk/post/1511https://lankadevelopers.lk/post/1511Mon, 13 May 2019 15:42:19 GMT<![CDATA[Reply to React JS Intro on Sat, 29 Dec 2018 06:12:54 GMT]]>React <3

]]>https://lankadevelopers.lk/post/381https://lankadevelopers.lk/post/381Sat, 29 Dec 2018 06:12:54 GMT<![CDATA[Reply to React JS Intro on Fri, 28 Dec 2018 13:30:59 GMT]]>Nice article... thanks bro

]]>https://lankadevelopers.lk/post/378https://lankadevelopers.lk/post/378Fri, 28 Dec 2018 13:30:59 GMT<![CDATA[Reply to React JS Intro on Fri, 28 Dec 2018 11:13:23 GMT]]>Good Explanation, react is the future of web frontend

]]>https://lankadevelopers.lk/post/377https://lankadevelopers.lk/post/377Fri, 28 Dec 2018 11:13:23 GMT<![CDATA[Reply to React JS Intro on Fri, 28 Dec 2018 09:26:13 GMT]]>Thanks @dev_lak

]]>https://lankadevelopers.lk/post/375https://lankadevelopers.lk/post/375Fri, 28 Dec 2018 09:26:13 GMT