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;
I hoped you understand the basic use case of React 😉
Top comments (0)