7.4 Introduction to ReactJS

• Single page or cross-platform application development
• Data visualization tools
• Social networks
• Web apps
• Messaging apps
• Blogs (Personal or professional)

• Easy to learn and use: Developers familiar with JavaScript can learn to use React in a matter of days. 69.7% of developers prefer JavaScript based frameworks over other programming languages.
• Virtual Direct Object Model (DOM): The tree-like structure of an HTML program is known as DOM. The users' actions on a website trigger an update that rewrites the entire DOM- requiring more resources. A virtual DOM works more efficiently because it changes only the elements that need manipulation.
• Requires less coding: Easy to create highly functional web UIs
• Reusability: React has reusable HTML codes that make a developer's life quite easy. It is easier to make and maintain web UIs because of this feature.
• Downward data flow: React framework's data flow is relatively simple. It has a straightforward downward data flow that is easy to track and work with.

• Continuous updates: Developers have to constantly re-learn new ways of coding because web UI the framework changes at a very rapid pace.
• Poor documentation: The extension libraries are not efficiently updated by the supporting community.
• JSX complications: React uses syntax that is a combination of HTML and JavaScript (Note: a new data type for HTML code). It has a steep learning curve and is difficult for amateur developers to work with.

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="like_button_container">
</div>
<!-- Load our React component. -->
<script src="like_button.js"></script>

<!-- like_button.js
'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    // JS
    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
    /* or
    // JSX
    return (
      <button onClick={() => this.setState({ liked: true })}>
        Like
      </button>
    );
    */
  }
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
-->

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="like_button_container_jsx"></div>
<!-- Load our React component. -->
<script type="text/babel" src="like_button_jsx.js"><!-- See the above code for this example. -->

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id='hello-world-container'></div>
<script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('hello-world-container')
    );
</script>

• React directly in HTML with Babel, or
• Setting up a React environment so that JSX can be executed at the server side
  • $ npx create-react-app my-react-app
  • $ cd my-react-app
  • In package.json, "start": "react-scripts start" -> "start": "PORT=yourport react-scripts start"
  • $ npm start -> http://cs.tru.ca:yourport (The port 8099 is currently running.)
  • Modify the React application: src -> App.js
  • Later, $ npm run build

• Here it an example of .map(), arrow function, and template literal.

  const data = ['apple', 'banana', 'orange'];
  const list = data.map((item) => `<li>${item}</li>`);
  //const list = data.map(function(item) { return `<li>${item}</li>`; });
  alert(list);
  

• Try this for React and .map()!
• Trial 1. Let's try the above code.
  <div id='tr1-list'></div> <div id='tr1-list-react'></div> <script> var data = ['apple', 'banana', 'orange']; var list = data.???((item) => `<li>???{item}</li>`); // using a template literal //var list = data.???(function(item) { return `<li>???{item}</li>`; }); document.getElementById('tr1-list').innerHTML = '<ul>' + list[0] + list[1] + list[2] + '</ul>'; </script> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const myArray = ['apple', 'banana', 'orange']; const myList = myArray.???((item) => <li>{item}</li>); ReactDOM.render(myList, document.getElementById('tr1-list-react')); </script> Try this exercise with runcode

const myelement = <h1>I Love JSX!</h1>;  // It is an example of JSX. One top level HTML element.
ReactDOM.render(myelement, document.getElementById('root'));

• Trial 2. Let's try the next code.
  <div id='tr2-root1'></div> <div id='tr2-root2'></div> <div id='tr2-root3'></div> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> function Weather1() { // Should start with an uppercase letter return <h2>What a great day!</h2>; } ReactDOM.render(<Weather1 />, document.getElementById('tr2-root1')); function Weather2(props) { // Should start with an uppercase letter return <h2>What a {props.islike} day!</h2>; } ReactDOM.render(<Weather2 islike='bright'/>, document.getElementById('tr2-root2')); class Weather3 extends React.Component { // Should start with an uppercase letter constructor(props) { super(props); this.state = {day: "Monday"}; // state: built-in property to keep Component properties } render(props) { return <h2>What a {this.props.islike} day!</h2>; // props: built-in property } } ReactDOM.render(<Weather3 islike='wonderful'/>, document.getElementById('tr2-root3')); </script> Try this exercise with runcode