React
Used for making Single page applications ( SPA ).
Different Components me tooti hui hoti h sites.
Eg -
Fotter
JSX ( Javascript Syntax Extension ) - Dynamic JS ko HTML ke sath use krne me help
krti h.
12+45 is JS since it is written in curly brackets.
App.css file ko import kiya hai.
#DEFAULT_EXPORT
#Named_Export
BOTH ARE SAME WAY
return(
<Header/> or <Header></Header>
);
TO IMPORT FILE
import Header from './Header.jsx'
Warning
--
Return statements will return only one component.
we will inclose them in fragements.
return (
<> #Fragement_open
<Header/>
<Footer/>
</> #Fragement_closing
)
If working inside the return statement then you need "{}" to run JS commands.
But if you are still inside the Function then you can just simply write the JS code outside
the Return statement.
Function Food()
{
const food2="Banana";
return(
<ul>
<li>{food2.toUpperCase()} </li> ---> BANANA
</ul>
);
}
To import profile pic from somewhere , add link using the src tag inside the img attribute
or you can import the pic after putting that pic inside the assets folder.
import profilePic from './assets/profile.jpg'
function card()
{
return (
<div className="card">
<img src={profilePic} alt="profile picture"> </img>
<h2>Bro Code</h2>
<p>Hello brother</p>
</div>
)
}
CSS
INLINE CSS
Props
--
Read-only properties that are shared between components.
A parent component can send data to a child component.
STUDENT.JSX
function Student(props) {
return(
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
<p>Student: {props.isStudent ? "Yes" : "No"}</p>
</div>
)
}
export default Student
APP.JSX
import Student from './Student.jsx'
fucntion App() {
return(
<>
<Student name="Spongebob" age={30} isStudent={true}/>
</>
);
}
export default App
propTypes/Default props
A mechanism that ensures the passed value is of the correct datatype.
Eg :- age: PropTypes.number (Ensure that the age value is a number)
Default Props can also be used.
STUDENT.JSX
import PropoTypes from 'prop-types'
function Student(props){
...
}
Student.propTypes = {
name:PropTypes.string,
age:PropTypes.number,
isStudent:PropTypes.bool,
}
Student.defaultProps ={
name:"Guest",
age:0,
isStudent:false,
}
APP>JSX
fucntion APP() {
return(
<>
<Student/>
</>
);
}
Conditional Rendering
UserGreeting.jsx
function UserGreeting(props){
if(props.isLoggedIn){
return <h2>Welcome {props.username}</h2>
}
else{
return <h2>Please login to continue</h2>
}
}
export default UserGreeting
App.jsx
import UserGreeting from './UserGreeting.jsx'
function App(){
return(
<>
<UserGreeting IsLoggedIn={false} username="Brocode">
</>
);
Setting Props and default Props in the above code.
import propTypes from 'prop-types';
.
.
.
UserGreeting.proptypes ={
isLoggedIn: PropTypes.bool,
username: Proptypes.string,
UserGreeting.defaultProps={
IsLoggedIn:False,
username:Guest,
}
export default UserGreeting
Rendering Array
function List(){
const friuts = ["apple","banana","grapes"];
const listItems = fruits.map(fruit => <li>{fruit}</li>);
return(<ol>{lostItems}</ol>);
}
export default List
import List from './List.jsx'
function App(){
return(<List/>);
}
export default App
fruits.sort(); // Sorts lexicographically
fruits.sort((a,b) => a.name.localeCompare(b.name)); // Alpahbetical
fruits.sort((a,b) => b.name.localCompare(a.name)); //Reverse_alpha
fruits.sort((a,b) => a.calories - b.calories); // By_calories
Creating Objects and rendering
This requires a unique key to render.
fruit.id is used as key here.
is used to give space.
function List(){
const fruits = [{id:1, name:"apple",calories: 95},
{id:2, name:"orange",calories:45},
{id:3, name:"coconut",calories:34}
];
const listItems = fruits.map(fruit => <li key={fruit.id}>
{fruit.name}:
{fruit.calories}
</li>);
return (<ol>{listItems}</ol>);
}
If you want to filter out the low calories fruit to another array.
const lowCalFruits = fruits.filter(fruit => fruit.calories < 100);
const listItems = lowCalFruits.map(lowCalFruit => <li key={lowCalFruit.id}>
{lowCalFruit.name}:
{lowCalFruit.calories}
</li>);
fruits.length > 0 && <List items={fruits} category="Fruits"/>
fruits.length > 0 ? <List items={fruits} category="Fruits"/> : null
Both are same way of writing ternaray operator.
Click Events
How to create an arrow functions.
const handleclick = () => console.log("Ouch !);
Passing parameters.
Here Bro is the parameter which i am passing.
const handleClick2 = (name) => console.log("${name} , stop clicking");
return(
<button onClick={handleClick2("Bro")}>
Click Me 🙂
</button>
);
To change the text of button when clicked.
function Button(){
const handleClick = (e) => e.target.textContent ="OUCH!";
return(<button onClick={(e) => handleClick(e)}>Click me</button>);
}
export default Button
onDoubleClick ( used when we have to try 2 times clicking action)
To change button to picture when clicked.
when you click on picture it will show some word ouch.
function ProfilePicture(){
const imageUrl ='./src/assets/profile.jpg';
const handleClick = () => console.log("OUCH !");
return (<img onClick={handleClick} src={imageUrl}></img>);
}
export default ProfilePicture
When click on image it will hide the image.
function ProfilePicture(){
const imageUrl ='./src/assets/profile.jpg';
const handleClick = (e) => e.target.style.display ="none";
return (<img onClick={(e) => handleClick(e)} src={imageUrl}></img>);
}
export default ProfilePicture
React Hooks
Works only on function based components not on class based components.
Need to import react library , specifically useState function from react.
useState function returns an array with two elements ( Variable and a setter function).
const [name ,setName] = useState();
If need to cahnge value of variable name- change it by using the setName(setter) which
is a function.
function MyComponent() {
let [name ,setName]= useState();
const updateName = () => {
name ="Spongebob";
}
return (<div>
<p>
name: {name}
</p>
<button onCLick={updateName}>
Set Name
</button>
</div>
);
}
export default MyComponent
This will not change the value in react. But it will inside the console.
Use setter to change the value in react.
function MyComponent() {
const [name ,setName]= useState();
const updateName = () => {
setName("Spongebob"); /// This will update the value.
}
return (<div>
<p>
name: {name}
</p>
<button onCLick={updateName}>
Set Name
</button>
</div>
);
}
export default MyComponent
