React JS Basics for Beginners

what is React JS

A JavaScript library for building user interfaces

Understanding the index.js

1. Rendering simple JSX elements in react

→index.js

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>
    <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

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

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

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 :

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

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

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

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

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;