React.js without JSX
JSX: Consider the following code snippet,
const sample = <h2>Greetings</h2>;
Most people use JSX with react, but that requires Babel which converts the ES6 code to a code that is compatible with the browsers. It means we need to a something like webpack. If we don’t use JSX then we don’t have to worry any about that.
JSX-less approach over the JSX-focused React Application: It is advisable to stick to JSX for your medium-sized or bigger projects. It still helps to understand what happens under the hood. For smaller React projects, where you don’t want to add a complex build workflow, or for multi-page-applications, you could consider the JSX-less version though.
Example 1: Using React without JSX using CDN (without Node). Following is a simple Html code to print Hello World using React without JSX.
Example 2: Using React without JSX in Application.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app rwjsx
Step 2: After creating your project folder i.e. rwjsx, move to it using the following command:
Project Structure: It will look like the following.
Now write down the following code in the index.js file in the src folder after all import statements.
Step to Run Application: Run the application using the following command from the root directory of the project:
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: