https://github.com/srikanth-kandi/react-hello-world

Hello world! in ReactJS ⚛️
https://github.com/srikanth-kandi/react-hello-world

reactjs

Last synced: 9 days ago
JSON representation

Hello world! in ReactJS ⚛️

• Host: GitHub
• URL: https://github.com/srikanth-kandi/react-hello-world
• Owner: srikanth-kandi
• Created: 2023-07-26T16:11:49.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-12T15:54:09.000Z (about 1 year ago)
• Last Synced: 2024-10-07T06:41:44.387Z (30 days ago)
• Topics: reactjs
• Language: HTML
• Homepage: https://srikanth-kandi.github.io/react-hello-world/
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Hello world! in ReactJS ⚛️

Live demo - [https://srikanth-kandi.github.io/react-hello-world/](https://srikanth-kandi.github.io/react-hello-world/)

Implemented with the help of React CDN v17.0.0 - [https://reactjs.org/docs/cdn-links.html](https://reactjs.org/docs/cdn-links.html) and Babel CDN v7.12.4 - [https://babeljs.io/docs/en/babel-standalone](https://babeljs.io/docs/en/babel-standalone)

I used the `JSX` syntax and Babel to convert it to JavaScript.

React will dynamically create a `
` tag with the content "Hello world!" in it.


```jsx

const element = 
Hello world!
;

```


The `className` is an inbuilt attribute in React which is used to add CSS classes to the HTML elements.

The `ReactDOM.render()` method is used to render the `h1` element into the DOM in the container specified (in this case, the `root` div).

`ReactDOM.render()` will take two arguments, the first one is the element to be rendered and the second one is the container in which the element should be rendered.

```jsx

ReactDOM.render(element, document.getElementById('root'));

```

After rendering, the DOM will look like this:

```html



    
Hello world!



```


Resulting in the following output:

![Hello world! output](./images/output.png)