Learn React? React Tutorial

Learn React? React Tutorial

What is React?

A JavaScript library for building user interfaces.
The techniques you will learn in the article are fundamental to building any React app, and it will give you a deep understanding of React.
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and pieces of code that called components.

Here React and ReactDOM CDN JS which you need to include on your web page.

Development JS

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

Production JS

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

A Simple Component in React JS with JSX format.

class HelloApp extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloApp name="John" />, document.getElementById('hello-app')
);

React JS without JSX format.

class HelloApp extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloApp, { name: "John" }), document.getElementById('hello-app'));
<div id="hello-app"></div>

Output Result:

Any query? Please share your thoughts in the comments below. Glad to help you!
Thanks!
Was this page helpful? Do not forget to share this post!

Leave a Reply

Your email address will not be published. Required fields are marked *