A Complete Beginners Guide for React.js
Getting Started with React.js in 10 mins
Table Of Content
- What is React ?
- Why Learn React ?
- Getting Started Guide !!
- Folder Structure
- Basic Concepts You Need To Know
- Conclusion
What is React?
- React is an Open source library for building user Interfaces.
- React is not a framework.
- Its only focus is developing UI interfaces.
- React has no support for routing or HTTP requests , as it focuses on UI only. But React can be effortlessly integrated with other libraries providing required features.
- React is created and maintained by Facebook and has a huge community.
Why React ?
- React has a component based architecture.
- React is great for writing reusable-code.
- React is declarative in nature, this means we never interact with DOM, the UI is updated when we change the state.
- React can be easily integrated into any application.
- React can be used to develop a single component , page or the entire application.
The ‘this’ keyword
‘this’ keyword will keep popping up again and again, It’s important to clearly understand the usage in react and js.
The ‘this’ keyword typically references a JavaScript element depending on the scope or context of its use.
Refer this article : https://medium.com/byte-sized-react/what-is-this-in-react-25c62c31480
Get Started
To get started with React all you need is Node.js and Text Editor of your choice.
The best way to get started with React is using create-react-app npm package, it helps you to setup completely new React project with all necessary files and configuration.
npm install -g create-react-app
create-react-app helloworldornpx create-react-app helloworld
run npm start from the created project to serve the default webpage.
Folder Structure
package.json : It holds the metadata about the project. Configures npm package dependencies that are available to all projects in the workspace.
node_modules: where all the required dependencies are installed.
/public:
- manifest.json : This file is required while creating a PWA (Progressive Web Application) of the React App. (refer the official document : https://create-react-app.dev/docs/making-a-progressive-web-app/ ).
- index.html : It is the entry point of our webpage, there is only one div tag with id=‘root’ in the body tag. It references to the root component in our React App.
/src:
- This is the folder that matters, this where you will write all the source-code for your React App.
index.js: It’s the entry point to our React App, Using react-dom, we render our React App inside the <div> with id ‘root’ in index.html file.
App.js: This is the Root Component of our React Application. create-react-app have already developed a dummy page for you. ( App.css file is referenced here which contains all the styling for App Component).
You must have noticed in App.js returned JSX, instead of using ‘class’ attribute in tags ‘className’ is used. This is because class is a reserved keyword in React and its used to declare a JS class, so hence className is used instead, it works the same.
Before starting with development of your App, delete all the extra files and code which
create-react-appgenerated.delete logo192.png and logo512.png , logo.svg files and their declarations & empty App.css and make function App in App.js file return
<div></div>
Basic Concepts You Need To Know
- JSX
- Component: Class Component & Functional Component
- Props
- State
- Event Handling
- Binding Event Handlers
- Component Lifecycle Methods
JSX
JavaScript XML (JSX) is an extension to the JavaScript language syntax, we use JSX to write elements and components in React.
JSX is not a requirement for using React,Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children)
JSX makes the code more simpler and elegent.
refer this document: https://reactjs.org/docs/react-without-jsx.html
Component
Components represents part of User Interface, components are like JavaScript functions which returns React elements. All the components that we build are contained inside the root component.
App.js with App function represents the root component, which exports App Component that is imported by index.js file and declared as <App/> , which gets replaced by the JSX returned by the App function.
Functional Component or Stateless Component
As the name suggest its stateless in nature and works similar to JavaScript functions, It might take some input and return JSX which describes the UI.
This HelloFunction() returns <h1>My First React App.</h1> , import this function in App.js and add tag <HelloFunction/>
Functional Components are stateless which means they cannot memorize or retain and reflect to changes in data, the response only reflect changes in input to the function.
Since React version 16.8 React Hooks were added which provide some state to the Functional Component. ref : https://reactjs.org/docs/hooks-intro.html
Class Component or Stateful Component
As the name suggest its stateful in nature which means it has some independent state of itself, state generally represents data. This is a JS class which extends React.Component class and must contain a render method which returns JSX.
Props
Props refer to the parameter passed to the functional or class component. Props are immutable in nature. Components are build while keeping reusability in mind, so if you copy paste <HelloFunction/> 10 times you will see “My First React App” 10 times as output.
But you might want to print different text at different times, hence props comes into picture, We can just have to pass the text to the component as props and it will be rendered by that component. This will save a lot of time as you wont have to create 10 different components which are same but differ in data.
Props can be passed as an attribute to the component’s tag.
Now, after passing the props it needs to be handled in the component. Functional Component directly receives as parameters of the function.
Curly braces {} are special JSX syntax to evaluate JavaScript expression, hence the value of
props.messageis evaluated and replaced with the expression.
In Class components the props are received in constructor, super(props) must be called from the constructor as we extend React.Component Class.
The ‘this’ keyword is used to access the props object of the class component.
State
State is managed within the Component, and is immutable in nature used to store mutable data, State is nothing but data which influence UI in the component.
State makes React a very powerful tool. Understanding State is very crucial for React as everything just rotates around it.
In Class Component State object can be initialized in the constructor, State is a Json object of key value pairs of data, which once initialized can only be changed by setState function.
The reason we had to enclose two h3 tags in a div is because only one element can be returned in React.
The extraneous ‘div’ tag is bothersome as it increases the complexity for no reason, for this
<React.Fragment>tag can be used to enclose all your elements without extra nodes to the DOM.
Let’s Add a button to Change to state value (event Handling in React will be explained properly in the next section.)
State can also be used in Functional Components using Hooks introduced in React 16.8 update, you can find more on https://reactjs.org/docs/hooks-intro.html
Event Handling
Event handling in React is quite straightforward where you declare a function which needs to be called and assign that function to that event in the tag, let’s look click event in buttons for both functional and Class Component.
In functional Component
We will create a new Functional Component EventFunction.js which returns a button
Create a new function handleClick() which will be called on button click, then assign attribute ‘onClick’ of button tag to ‘handleClick’
Note: Don’t add parenthesis while passing or assigning the function to the Event
<button onClick={handleClick}>Click Me</button>, handleClick is a reference to the functon which will be assigned to onClick Event and respectively called, while handleClick() is calling that function on load itself hence you will find the message already being logged while the page loads.Also React follows camelCasing based naming convection hense its onClick instead of onclick
In Class Component
the process of event handling is the same but to reference handleFunction we have to use the ‘this’ keyword.
<button onClick={this.handleClick}>Click Me</button>
Event Binding Handlers
Reason for Event Binding in React Class Components, Is Solely due to ‘this’ keywords behavior in JS.
In Short, When we need to access the class context (‘this’ keyword) from the called function then its necessary that the function is called with class context itself. So we need to bind the Event Handlers with the Class itself before assigning them to events.
Create a new file EventClassComponent.js in src folder and add it to App.js.
There are 3 ways to bind a function.
- Binding the Method in the render method itself.
Drawback: for every state change render function is called in React which in turn creates a new bounded function and assigns it to the event. This is an overhead which can be troublesome as the project grows in size.
- Using Arrow function as Class property
Change the way in which you declare the function, this is recommended method by the React documentation Guide, and its quite simple
- Binding in constructor itself
But still there is a problem here, what if you want to pass parameters to the function
- Calling the Event Handler in Arrow Function body
Notice that parenthesis to the function are present, By this method you don’t event have to call .bind(this) function and even can pass parameters to the functions.
Component Lifecycle Methods
Each component has a several “lifecycle methods” that you can override to where you can run your code which depends on the lifecycle state of your component. The Lifecycle of a component can be divided into three parts 1. Mounting 2. Updating 3. Unmounting
Mounting
When an instance of a component is being created and inserted into DOM
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
constructor, render and componentDidMount functions are quite generally overridden, constructor is overridden to allow props and initialize state and other variables, render is overridden to return the JSX element, and componentDidMount this method is called when the component is successfully mounted/loaded and this is the perfect time to make HTTP requests
Updating
When there is some change in props or state then Update is triggered
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
render and componentDidUpdate functions are quite generally overridden, render is overridden to return the updated JSX element, and componentDidUpdate this method is called when the component is successfully updated and post updated process can be carried out including HTTP requests.
Unmounting
When the component is being removed from the DOM.
- componentWillUnmount()
This method is called when a component is being removed from the DOM. Variables can be freed, services can be unsubscribed,threads can be stopped in this method.
Conclusion
React is a wonderful library for UI development and it’s here to stay, React is very stable and is listed in many companies tech stacks like Uber, Airbnb, Netflix and of course Facebook :) , it’s flexibility and ease of integration has made it the go-to option.
I hope this article helps to commence with your React.js journey.
