React JS Basics for Beginners
Tags: beginners, react, tutorial, javascript
Published: 2021-12-09 12:39:29

### what is React JS

A JavaScript library for building user interfaces


## Understanding the index.js

### 1. Rendering simple JSX elements in react

→index.js

```jsx
import React from "react"
import ReactDom from "react-dom"

ReactDom.render(
<ul>
 <li>eat</li>
 <li>sleep</li>
 <li>code</li>
</ul>
,document.getElementById("root")
)
```

→index.html

I linked the JS and CSS here inside the div tag with id "root" all of our React app renders

```html
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

### 2 Rendering simple JSX elements using Function

```jsx
import React from "react"
import ReactDom from "react-dom"

//function
function App()
{
    return (<ul>
 <li>eat</li>
 <li>sleep</li>
 <li>code</li>
</ul>)
}
ReactDom.render(<App />,document.getElementById("root"))
```

### 3. App.js


Here we are going to use create App.js and render it into index.js

let's create a new file → App.js

```jsx
import React from "react"

function App(){
    return (
    <div>
    <h1>Umapathi K.</h1>
    <p>I am the student who loves...</p>
    <ol>
    <li>Running</li>
    <li>Coding</li>
    <li>Pubg</li>
    </ol>
    </div>)
}

export default App
```

here "export default" is used **export** the App.js file so, that we can use it anywhere in the directory  

→index.js

```jsx
import React from "react"
import ReactDom from "react-dom"
import App from "./App"

ReactDom.render(<App />,document.getElementById("root"))
```

### 4 Organising the project

for now, our React project's structure is like this
--📂public
 -index.html
--📂src
 -style.css
 -index.js
 -App.js


###5 simple Twitter app

#### Steps : 

1. open a new stackblitz react project

> The best online code editor for React JS is stackblitz, It is very efficient for learning and building small projects, So, I recommend creating account on stackblitz for learning React JS
{%  stackblitz react %}

2.create "components" 📂 folder inside src

3.create "Tweet.js" inside the components folder

4.pass props inside App.js
 
 

props is used to change the component's content **dynamically** instead of **hard-coding** it, it enhances the **code re-usability**

→App.js

```jsx
import React from "react";
import Tweet from "./components/Tweet";
function App(){
    return(
    <div className="tweet"> // class is keyword in js so we use className
         <Tweet name="Umapathi" content="coding with 2gb ram😁" likes="2" />
      <Tweet
        name="madhavan"
        content="finished my coding schedule😴"
        likes="15667"
      />
      <Tweet
        name="Ajay"
        content="I should have started learning recat early 😣"
        likes="2487"
      />
    </div>
    );
}
export default App;
```

→components

  →Tweet.js

```jsx
import React from "react";
function Tweet(props){
    return (
        <div>
        <h1>{props.name}</h1>
        <p>{props.content}</p>
        <h3>{props.likes} likes</h3>
        </div>
    );
}
export default Tweet;
```

Alternatively, we can also code like below which is called "destructuring", instead of writing props. Something every time 

```jsx
import React from "react";
function Tweet({name,content,likes}){
    return (
        <div>
        <h1>{name}</h1>
        <p>{content}</p>
        <h3>{likes} likes</h3>
        </div>
    );
}
export default Tweet;
```
I hoped you understand the basic use case of React 😉

 ⚛[simple Twitter app demo
](https://stackblitz.com/edit/react-setstz?devtoolsheight=33&embed=1&file=src/App.js)