Some information about React JSX, Error handling, Props and Prop types

1.JavaScript XML

JSX stands for JavaScript XML. It is a syntax extension to JavaScript.JSX is a preprocessor step that adds XML syntax to JavaScript.JSX produces React “elements”. It is possible to create an element without JSX but JSX makes React a lot more elegant.

It is recommended to use JSX with React to describe what the UI should look like. JSX is easier to read and write. Babek transforms these expressions into an actual JavaScript code. It also allows React to show more useful error and warning messages.

Ex:-
const element= <h1>Hello World</h1>
React.createElement("h1",null,"Hello World")

2.JavaScript Expressions in JSX

We can put any valid JavaScript expression inside the curly braces in JSX. you can pass any javascript expression as children, by enclosing it within {} curly braces.

EX:-
const name = "Shaif"
const displayName = <h1> My name is {name} </h1>

3. JSX Represents Objects

Babel compiles JSX down to React.createElement() calls.

const element = <h1 className="color"> My name is Shaif </h1>

4.Specifying Attributes with JSX

you may use quotes to specify string literals as attributes.

Syntax:-

const element = <h1 attribute="value"> </h1>
EX:-
const element = <h1 className="color">Hello </h1>

You may also use curly braces {} to embed a javascript expression in an attribute.

const element = <h1 className={style}>Hello </h1>
ReactDOM.render(<App name= “shaif”/>,document.getElementById(“root”));

Note —

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

Don't put Quotes around curly braces when embedding a javascript expression in an attribute. you should either use quotes(for string values) or curly braces (for expressions), but not both in the same attribute.

5.Props

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. we call this object “props”.

function Student(props){
   return( <div>
              <h1>His name is {props.name}</h1>
              <h1>His Roll no {props.roll}</h1>
           </div>

If you pass no value for a prop, it defaults to true.

6. Props are Read-only

Whether you declare a component as a function or a class, it must never modify its own props. All React components must act like pure function with respect to their props. I will take the data as a child props only to display it. Data cannot be changed in any way.

7.Type checking with PropTypes

npm install prop-types

To run type checking on the props for a component, you can assign the special prop Types property.

Ex:-
import PropTypes from "prop-types";
Student.propTypes = {
   name: PropTypes.string
};

Note: —

When an invalid value is provided for a prop, a warning will be shown in the JavaScript console.

For performance reasons, porpTypes is only checked in development mode.

8. Required and Default Prop Values

If no value of props is given then an error will be given. And to give this value you have to write the following code

*Required
Ex:-
import PropTypes from "prop-types";
Student.propTypes = {
   name: PropTypes.string.isRequired
};

You can define default values for your props by assigning to the special default props property.

*Default Prop Values
Ex:-
import PropTypes from "prop-types";
Student.defaultProps= {
   name: 'mohammad'
};

9. Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. A class component becomes an error boundary if it defines either of the lifecycle methods

Error boundaries do not catch errors for:

Event handlers

Asynchronous code

Server-side rendering

Errors are thrown in the error boundary itself

10. React Optimizing Performance

When we write code to React, it becomes very heavy when it goes into production. As a result, it takes much longer when the website is not loaded. And to reduce this time the website has to be optimized. And for this, if we put the whole file in a new folder and publish it by shortening all the codes there, the load time in production is reduced. For this, you have to run a command at the command line. If your project is built with Create React App, run:

npm run build

If you aren’t sure whether your build process is set up correctly, you can check it by installing React Developer Tools for Chrome. If you visit a site with React in production mode, the icon will have a dark background and if you visit a site with React in development mode, the icon will have a red background