React Features

React Features

Ducat India Ducat India

Ducat India

25+ Years of Empowering Minds in Delhi NCR. School of Ai

发布日期: 2021年12月18日
+ 关注

React Features

React old versions and new versions has not any much difference in features but in 17 or latest version features are improved which give better performance.

Actually there is a new version of JSX support by React 17. Browsers don’t understand JSX due to which it is to be transformed into JavaScript. So, this transformation process is changed in new version. There are following benefits from this new transform-:

  • React Import is not required
  • Improved bundle size

There are fewer concepts to learn.

JSX syntax has not changed at all. Upgrading to ne JSX is completely optional. Compiler takes the JSX and transform into JavaScript that understand by browser using “react create” element. Example-: Importing react from react and after that we have functional component returning JSX and then compiler transform JSX into react create element. Now then the reason behind updation is that there are some issues with create react with JSX, there are some performance issues created by “react create element” moreover react create element never intended to be the implementation of JSX.

To fix these issues new updated JSX doesn’t use “CREATE ELEMENT”, It uses two newly introduced entry points into the react package in react 17 and these are solely introduced by compilers.

Difference between codes of older version and newer version in case of importing is-:

		Src> JS code.js > 
       Function app() {
      Return < h1> Hello World! </ h1>;
     }
             Src> JS compiled.js>
                    Import {jsx as _jsx} from “react/jsx-runtime”;
                  Function App () {
                  Return _jsx (“h1”, {children: “hello world”});

So, in above codes- In new version we again have react functional component returning some jsx this time the compiler returns something completely different, its importing jsx from react jsx runtime and then component its returning jsx using this new jsx runtime notice in the code, now you no longer have to import react, only just write some JSX

Now, going to use npx in react-:

Code$ npx create-react-app@next –scripts-version=@next –template=cra-template @next.

Installation will be done.

After making changes according to new updation of JSX make sure npx working starts.

要查看或添加评论，请登录

Ducat India的更多文章