React JSX

---

Introduction to JSX

JSX allows you to write elements and components in a syntax that looks very similar to HTML. Under the hood, JSX is transformed into JavaScript objects, making it more powerful and flexible.

Basic JSX Syntax

        import React from 'react';
        import ReactDOM from 'react-dom';
        
        const element = <h1>Hello, world!</h1>;
        
        ReactDOM.render(element, document.getElementById('root'));
      

In this example:

• <h1>Hello, world!</h1> is JSX.
• It gets compiled to React.createElement('h1', null, 'Hello, world!').

Embedding Expressions in JSX

JSX allows you to embed any JavaScript expression by wrapping it in curly braces {}.

        const name = 'John';
        const element = <h1>Hello, {name}!</h1>;
        
        ReactDOM.render(element, document.getElementById('root'));
      

JSX Attributes

JSX uses camelCase for attribute names instead of the HTML convention

        const element = 
;
        const image = ;
      

JSX and Children

Elements can contain children.

        const element = (
          <div>
            <h1>Hello!</h1>
            <h2>Good to see you here.</h2>
          </div>
        );
          
      

JavaScript Expressions as Children

You can pass any JavaScript expression as children.

        const element = <h1>{1 + 2}</h1>;

      

Function Components with JSX

A functional component is a JavaScript function that returns a JSX element.

        function Welcome(props) {
          return <h1>Hello, {props.name}</h1>;
        }
        
        const element = <Welcome name="Sara" />;
        ReactDOM.render(element, document.getElementById('root'));
          
      

Class Components with JSX

A class component extends React.Component and includes a render method.

        class Welcome extends React.Component {
          render() {
            return <h1>Hello, {this.props.name}</h1>;
          }
        }
        
        const element = <Welcome name="Sara" />;
        ReactDOM.render(element, document.getElementById('root'));
          
       

Conditional Rendering with JSX

You can use JavaScript operators like if or the conditional operator to create elements representing the current state.

        function Greeting(props) {
          const isLoggedIn = props.isLoggedIn;
          if (isLoggedIn) {
            return <h1>Welcome back!</h1>;
          }
          return <h1>Please sign up.</h1>;
        }
        
        ReactDOM.render(<Greeting isLoggedIn={false} />, document.getElementById('root'));
          
       

Lists and Keys

You can build collections of elements and include them in JSX using JavaScript arrays and the map() function.

         
        function NumberList(props) {
          const numbers = props.numbers;
          const listItems = numbers.map((number) =>
            <li key={number.toString()}>
              {number}
            </li>
          );
          return (
            <ul>
              {listItems}
            </ul>
          );
        }
        
        const numbers = [1, 2, 3, 4, 5];
        ReactDOM.render(<NumberList numbers={numbers} />, document.getElementById('root'));
          
       

Forms in JSX

Handling form elements in React involves managing component state and ensuring the state updates correctly on user input.

        class NameForm extends React.Component {
          constructor(props) {
            super(props);
            this.state = { value: '' };
        
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
          }
        
          handleChange(event) {
            this.setState({ value: event.target.value });
          }
        
          handleSubmit(event) {
            alert('A name was submitted: ' + this.state.value);
            event.preventDefault();
          }
        
          render() {
            return (
              <form onSubmit={this.handleSubmit}>
                <label>
                  Name:
                  <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
              </form>
            );
          }
        }
        
        ReactDOM.render(<NameForm />, document.getElementById('root'));
          
       

Styling in JSX

You can use the style attribute in JSX, but instead of a string, you pass an object to it.

        const divStyle = {
          color: 'blue',
          backgroundColor: 'lightgrey',
        };
        
        const element = <div style={divStyle}>Hello World!</div>;
        
        ReactDOM.render(element, document.getElementById('root'));
          
       

Fragment

React.Fragment lets you group a list of children without adding extra nodes to the DOM.

        function App() {
          return (
            <React.Fragment>
              <h1>Hello</h1>
              <h2>World</h2>
            </React.Fragment>
          );
        }
        
        ReactDOM.render(<App />, document.getElementById('root'));
       

Handling Events

React events are named using camelCase, and you pass a function as the event handler.

        class Toggle extends React.Component {
          constructor(props) {
            super(props);
            this.state = { isToggleOn: true };
        
            // This binding is necessary to make `this` work in the callback
            this.handleClick = this.handleClick.bind(this);
          }
        
          handleClick() {
            this.setState(state => ({
              isToggleOn: !state.isToggleOn
            }));
          }
        
          render() {
            return (
              <button onClick={this.handleClick}>
                {this.state.isToggleOn ? 'ON' : 'OFF'}
              </button>
            );
          }
        }
       

---

Next >