ReactJS is a JavaScript library used for building user interfaces. It is Declarative, Component-based and Technology stack agnostic. It has been designed for speed, simplicity, and scalability. These features make it one of the most popular libraries among web developers.
In this article, we will explore creating a React application and adding comments to it.
Creating React Application
Step 1: Create a React application with the following command:
npx create-react-app my-app
Step 2: Move to the project folder my-app with the following command:
cd my-app
Step 3: Start the development server with the following command:
yarn start
(This will run your application at localhost:3000, where you can see all the changes you make to the application.)
Project Structure: It will look like the following.
Example 1: Comments for React Components. We can write comments in React using the double forward-slash // or the asterisk format /* */, similar to regular JavaScript.
App.js
import React, { Component } from 'react'; // This is a comment class App extends Component { /* This is also a comment*/ render() { return ( <div> <h1>Welcome to neveropen</h1> </div> ); } } export default App; |
Output:
Example 2: The above example does not work when we want to comment things inside the render block. This is because we use JSX inside the render block and must use multi-line comment in curly braces {/* */}.
App.js
import React, { Component } from 'react'; class App extends Component { render() { return ( <div> // This is not a valid comment /* Neither is this */ {/* THIS ONE IS A VALID COMMENT */} <h1>Welcome to neveropen</h1> </div> ); } } export default App; |
Output:
Note: We must remember, that even though JSX gets rendered just like normal HTML, it is actually a syntax extension to JavaScript. So, using <!– –> as we did with HTML and XML will not work.
App.js
import React, { Component } from 'react'; class App extends Component { render() { return ( <div> <!-- This is not a valid comment --> {/* THIS ONE IS A VALID COMMENT */} <h1>Welcome to neveropen</h1> </div> ); } } export default App; |
Output:
