DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for React JS Basics for Beginners
Umapathi
Umapathi

Posted on

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")
)
Enter fullscreen mode Exit fullscreen mode

β†’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>
Enter fullscreen mode Exit fullscreen mode

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"))
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"))
Enter fullscreen mode Exit fullscreen mode

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

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;
Enter fullscreen mode Exit fullscreen mode

β†’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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

I hoped you understand the basic use case of React πŸ˜‰

βš›simple Twitter app demo

Top comments (0)

We want your help! Become a Tag Moderator.
Fill out this survey and help us moderate our community by becoming a tag moderator here at DEV.