Introduction
ReactJS is a famous JavaScript library used to build user interfaces. It was developed by Facebook in 2013. Soon after the launch, it gained a wide popularity amongst developers because with React, the developer have to write less amount of code and now they have relieved with the most annoying thing when building a website i.e., Page Refresh. Yeah, that is one of the things devs. like about React. What? Interested in knowing how this works. No worries I got you!
Getting started with ReactJS
To use React, you need to install nodejs which is a server side technology that allows to write JavaScript on server side. To download nodejs: link to the website Download NodeJS
Now,
- Open the terminal window.1. Open the terminal window
- Type, "node –version". It will show the node version that you have installed. If it throws error, that means node is not installed properly.
- Then, type npx create-react-app app-name to create a new react app. It may take a few minutes to setup.
You will see something like this on your terminal screen.
Hurrah! You got this. Now write cd app-name to go to the folder directory and write npm start. Don’t worry about anything, at start even if you don’t understand things just go with the flow. App will run on the browser at 3000 port.
React Fundamentals
Hello World
Just ask yourself and think about the first language that you have learn. Which program did you make. Was it hello world? Off course, we will make it over here as well.
Open the
Now , erase the 'header' tag. I mean everything written in it.
Now just write Hello World in h1 tag. Like this.
Save it and check the browser, Hello World is now printed on the web page. We have made our first React App. But don’t get crazy, there is much more to learn about React. Let’s dig in
What is JSX?
In simple terms, JSX is nothing but extraordinary HTML, that means you can also include JavaScript code into it. React understands JSX, not plain HTML.
Why JSX?
With JSX you can also build the logic to manipulate the UI, along with the HTML code itself. This created lot of flexibility of doing the things together rather than creating different files we used to do before such as index.html, style.css, app.js. JSX is enough capable to writing all the things together.
Rules in order to use JSX
- All the JSX should be written in return statement.
- JSX don’t allow multiple tags inside it. It should only have one main tag.
- </> is a special kind of tag that is used in JSX as a main tag.
Using JSX
Enough theory. Let’s write some code to get a practical idea about JSX.
Components
Components are a piece of code that you can use repeatedly if you want.
React follows the pattern of using component so that if changes need to be made, we just have to do it once. Also, components like Navbar and Footer can be re-use in every page. It increases the readability. Whenever you need the component, you can load it over there.
JSX components follows Pascal convention.
How to make components and render them?
Task:
Create a component that greets Good Morning with user’s name and load it into <App> component.
Create a new component Greet.jsx in the source folder. And write a greet program.
How to use the Greet component in the App component?
Import the
</> is convention used to for <> </>.
Types of Components
Functional Component
New and preferred way of writing components. Same as normal JS functions.
Clean and simple.
Note: All the progams will be written in function based structure.
Class Component
Follows a class based writing approach.
What are props?
Props are nothing but short of properties. You can pass some properties to a component when you call it. The component will take all the props and can use those values where it wants.
Props can be passed as a plain text or as any JS variables such as Integer, Object, Boolean etc.
The other component will receive these props in a props JSON object.
Learning this kind of library needs hands on practice rather than memorising the theory. Let’s write some code then.
Passing the name and message to the <Greet/> component.
<Greet/> component will receive the props as a JSON object like this.
Now, <Greet/> can use the values of name and message and use it throughout the component.
You must use the same name that were used while passing the props.
Yayy! Now you can use the
You cannot change the value of props. They are read-only. I know you are wondering that they may be some instances when the UI will change. Yeah we do have something spicy for that later on.
Default Props and Proptypes
One can assign default props, if the component did not receive that prop, it will use the default one. Also, we can mention proptypes, like name must be a string, If a string is not passed, it will throw an error.
React Architecture
I am sure you were waiting for this. I know that without being familiar with the environment, things are not clear to us. So let’s understand how React works and will go thorough the folder structure as well.
Folder Structure
Entry file: index.js
Responsible to load the App component in the index.html file. All the components don’t matter already made by React for us or you create must be place in the source folder. You may put in some directory to make things organise but it should be in the src folder.
When the application starts. Index.js target the div with class ‘root’ present in the index.html file and loads the App component in that div.
You must be wondering why we do all these things when we can create different .html files and send them to the browser. But the disadvantage in that is every time a browser request for a page, server will send the whole html page which can take much bandwidth.
Instead, what React developers thought, we will keep only one .html file and we will manipulate the content according to the UI we need. So now, JS is responsible for changing the UI. This is the reason why page doesn’t get refresh. Because browser is not making any other requests. On the very first request, it took the .html file and now we are just changing the data of the file however we need.
Isn’t that beautiful. Now the process will be much faster.
What is a State?
Remember, I have told before that we have something spicy for storing values. Let's discuss the spicyness of React state.
State is nothing but the current appearance or position of a component
In react, we can use state when we know at some point the state of that component will be changed.
In function-based components, we have hooks to manage state. Now you must be wondering what are hooks now.
Hooks were included in React 16.8. They help us to manage to state in functional components. There are a bunch of Hooks present in React library. Hook for using state in functional components is useState.
Usage
Felt amazed? Using states you can manage a large application in an efficient way. But the only way to update the state in the functional component is by its setter method.
const [name, setName] = useState(‘’);
We cannot do something like this. Name = “New Name”
Correct way: setName(“New Name”)
React lifecycle
In this blog, we will discuss the React Lifecycle with Hooks as we are not covering the class based components.
Remember we discussed about Hooks. One of the most commonly used hooks is useEffect hook.
useEffect hook is basically an advanced function that is the combination of 3 different functions from class based components. They are componentDidMount, componentDidUpdate , componentWillUnmount will run after the component renders.
It takes 2 arguments. First is the callback function that runs after every render of the component exactly how the componentDidMount function works. Second argument is call effect dependency parameter. By default useEffect runs after every render and every update of the component. But if we want it to be fired only when some particular state value changes, then we can pass that state value in dependency array.
Usage:
useEffect is most commonly used for fetching data from the backend and storing it to a state variable.
Let’s write a program that fetches a fake JSON data from an API and stores it into a state variable.
Now, what if we want to run useEffect on a particular event change. We can do something like this.
This will fire the useEffect whenever the state ‘data’ changes.