I recently learnt about reactJS so thought why not share my learnings?
Here is blog for you which will help you to get your hands dirty with react as an absolute beginner.
1. Some terms to get started with reactJS 🤓
Declarative:
👉Before we used to take input and for showing output we used to write for example .innerText or .innerHTML like that. Instead, we can just declare by telling app that this is how app should look and react will make it look and we don't have to write any of the .innerHTML and all. Here we don't have to tell the program what to do. If we have to tell it, then it is imperative.
👉So, React is declarative library in which you just tell the app how it will look and get your job done!
Component based:
👉React basically make small components so you can even make entire UI using those small small components. Benefit of that we can also reuse of that components. Suppose we have component of like button then we can reuse it and it still works the same thats why we have many of the component libraries available
Learn once,write anywhere:
👉So if you learn today about react, you can write about your app on multiple platforms.
2. Walk through react app and knowing ReactDOM: 🤓
👉Asking react that whatever is made in app.js, take all of it and put it inside the id root which is all done by react and reactDOM.
👉What reactDOM is used for?
👉Putting it on the browser. If you are using reactNative, it will not work as ReactDOM is only for the browser. But React is the core same in all
Point to be noted: 🤓
👉this is just like editing HTML, but see that file is not .html but .js
3. JSX 🤓
👉JSX is nothing but HTML part in but good part is you can also do JavaScript part inside the JSX
👉JSX is extension of JavaScript
var myName = "Samyak Shah"
<h1> { myName } </h1>
// curly bracket meaning: Whatever inside it is JavaScript
Output 👇
Samyak Shah
4. Style as an object 🤓
👉Styling in react :
var color = "red"
var myName = "Samyak Shah"
<h1 style = { { backgroundColor: color } } > {myName} </h1>
Output 👇
Samyak Shah
👉First curly bracket is whatever inside it is JavaScript
👉second curly bracket is: we have to now give an object so double curly brackets where second curly bracket stands for an object
👉note that we cannot use # inside the curly brackets
5. class vs className 🤓
👉class is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses className instead of class.
6. Attributes 🤓
👉 Nothing different in react for attributes. It works the same as in HTML
<h1 src = "/"> Link </h1>
7. onClick 🤓
👉In react, we don't need addEventListener()
👉To console clicked when we click on a button,
function clickEventHandler() {
console.log("Clicked")
}
<button onClick = {clickEventHandler}> Click me </button>
8. useState 🤓
👉useState is a function. Now when we call a function, we give an argument or say initial value which we want the variable have. so useState("") .
👉Here useState returns two values but as we know that function in javaScript cannot return two values so it returns an array
👉we use useState to update the state in React
const [variable , function ] = useState("");
9. Render Cycle 🤓
Cycle : view --> interact ---> state ---> render()
👉There is something in view to which user will interact. 👉So we first create something in view such as we create a like button. Now user will click on it. So to show some change when user clicks on it,
👉we set the state in eventHandler , do some processing and then
👉finally react to it or render it. Render in simpler terms is putting on the screen.
10. onChange 🤓
👉The onchange event occurs when the value of an element has been changed.
function changeEventHandler(event) {
console.log(event.target.value)
}
<input onChange = {changeEventHandler}></input>
11. map() 🤓
👉If we want to print some items together then we use for loop. In react we use map() which works similarly
👉It takes a function inside it and it runs that function every time with a new value
const shoppingList = ["Tea" , "coffee" , "Green tea"]
<ul>
{shoppingList.map(function(item) {
return <li> { item }</li>
})}
</ul>
Output 👇
- Tea
- coffee
- Green tea
12. How to put a click handler on list item 🤓
👉Note that we are considering one example:
syntax: onClick={() => emojiClickHandler(emoji)}
If you liked my content, how about connecting?