xxxxxxxxxx
/* React is a lightweight yet powerful JavaScript framework for creating user interfaces.
It solves many problems of developer, like easy state management and updating, creating interactive UIs, a big library support, routing, reusable components (write once use everywhere) and a huge community of developers working day and night to improve the framework.
After the introduction of react hooks in React 16.8, function component are now the standard way of writing react components, so it is recommended that a new developer focuses more or functional components rather than class based components.
In react we can write both HTML and JavaScript in the same file (called JSX syntex), it gives us more control and facilities over our code.
** Note - Some developers say it's a library not a framework (this is arguable but does not make a difference for the react itself). On official React website it is said to be a library. */
// How to you write a simple react component (In TypeScript)
import React from 'react'
function Component(){
const name = "Himanshu"
return (
<h1>Hello {name}</h1>
)
}
export default Component
xxxxxxxxxx
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
xxxxxxxxxx
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
To start with react: install node in your device
then open terminal and run :
npx create-react-app my-app
cd my-app
npm start
xxxxxxxxxx
// I would suggest using function components react hooks
// if you use react version > 16.8. React function components have
// various advantages over React class. Check them out here:
// https://reactjs.org/docs/hooks-intro.html
import React, { useState } from 'react';
const Example = (props) => {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>Hello {props.name}. You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
xxxxxxxxxx
A JS Library that is considered one of the best frameworks/libraries of JS, Thi is Made by Facebook, If u want check out Clever Programmer, the god of React in Youtube
xxxxxxxxxx
ReactDOM.render(JSX, document.getElementById("challenge-node"));