what is reactjs
React is a declarative, efficient, and flexible JavaScript library for
building user interfaces or UI components. It lets you compose complex UIs
from small and isolated pieces of code called “components”.
It is used by large, established companies and newly-minted startups
alike (Netflix, Airbnb, Instagram, and the New York Times, to name a few).
React brings many advantages to the table, making it a better choice
than other frameworks like Angular.js.what is react
step : 1 // First install firebase-tools
npm install firebase-tools -g
step : 2 // login in your gmail account and then create one project.
step : 3 // Then go to your project directory
firebase login // enter details
step : 4
npm run build
step : 5
firebase init
// ? What do you want to use as your public directory? build
// ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
// ? Set up automatic builds and deploys with GitHub? No
// ? File build/index.html already exists. Overwrite? No
step : 6 // your project is now deployed
firebase deploy
step : 7
// go to firebase account
// select your project
// goto Hoistingreact.js
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
// Example usage: <ShoppingList name="Mark" />react js
function Cart() {
const monsteraPrice = 8
const [cart, updateCart] = useState(0)
const [isOpen, setIsOpen] = useState(false)
return isOpen ? (
<div className='lmj-cart'>
<button onClick={() => setIsOpen(false)}>Fermer</button>
<h2>Panier</h2>
<div>
Monstera : {monsteraPrice}€
<button onClick={() => updateCart(cart + 1)}>
Ajouter
</button>
</div>
<h3>Total : {monsteraPrice * cart}€</h3>
</div>
) : (
<button onClick={() => setIsOpen(true)}>Ouvrir le Panier</button>
)
}react.js
// import { Link } from "react-router-dom";
import { IBlog as IProp } from "./useFetch"
const BlogList: React.FC<IProp> = ({ data }: IProp) => {
const renderList = () => {
return data.map((blogIndex) => {
return (
<div className='blog-preview' key={blogIndex.id}>
<a href={`/blogs/${blogIndex.id}`}>
<h2>{blogIndex.title}</h2>
<p>Written by {blogIndex.author}</p>
</a>
</div>
)
})
}
return (
<ul>
{renderList()}
</ul>
)
}
export default BlogList;react js
// use npm package manager
npx create-react-app my-app --use-npmCopyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
