React Js — Complete beginners guide

8 min readMay 21, 2023

In this day and age, the world can’t live without mobile and web applications. Everything is digitized, from booking cabs to ordering food to making bank transactions. Thanks to the efficient frameworks and libraries that provide a seamless user experience, One such robust frontend library is React. Let's talk about it.

What is React ?

React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used front-end libraries for web development.

React offers various extensions for entire application architectural support, such as Flux and React Native, beyond more UI.

Why learn React when there are many frameworks available?

The first reason you should learn ReactJS is because it is the most loved and used web library among professional developers.

It was created and maintained by Facebook. When a company as big as FB uses and invests in React, it naturally has a huge community, which is quite helpful while learning as well.

It has become increasingly popular among developers and is also one of the most sought out skill sets currently.

React has a component-based architecture. This lets you break down your application into small, encapsulated parts which can then be composed to make more complex UIs.

React is easier to use as it requires minimal coding and because of its simplicity.

React is declarative. This means that you tell React what you want in the user-interface and React will build the actual User-Interface.

The final and best thing is that it is easy to learn compared to other frameworks.

Prerequisites

HTML, CSS
JavaScript fundamentals like this keyword, filter, map, reduce, const, arrow functions, template and object literals , spread operators and destructuring assignment.

Tools

Node JS (can be downloaded from nodejs.org)
Text Editor (Visual Studio Code, Atom, Sublime)
Web Browser (Chrome etc..)

Start with building React Web App

Are you excited to embark on your journey of building your first React web app? Look no further! So, let’s dive right in!

Setting Up Your Development Environment

Before we begin, make sure you have Node.js installed on your machine. Node.js comes bundled with npm, which is the package manager we’ll be using. Once you have Node.js installed, open your command line and follow these steps:

Create a new directory for your React app: mkdir my-react-app
Navigate into the newly created directory: cd my-react-app
Initialize a new React project using Create React App: npx create-react-app .
Wait for the project to be initialized.

Congratulations! You’ve now set up your development environment and created a new React project.

Exploring the Project Structure

After the project initialization is complete, you’ll notice that several files and directories have been created. Let’s take a quick look at the important ones:

src/: This directory contains the main source code of your React app.
src/index.js: The entry point of your application.
src/App.js: The main component of your application.
src/index.css: The main CSS file for your application.
public/: This directory contains the public assets of your app.

Running Your React App

Now that you have your project set up, it’s time to see your app in action. In your command line, navigate to the root directory of your project and run the following command:

npm start

This will start the development server, Paste the url in the browser search “http://localhost:3000/”) You should see a “Welcome to React” message.

Customizing Your App

With your app running, you can now start customizing it to fit your needs. Open the src/App.js file in your code editor and modify the content inside the return statement. You can replace the existing content with your own HTML and React components.

Features in React Js

React offers some outstanding features that make it the most widely adopted library for frontend app development. Here is the list of those salient features.

JSX

JSX is a JavaScript syntactic extension. It’s a term used in React to describe how the user interface should seem. You can write HTML structures in the same file as JavaScript code by utilizing JSX.

const name = 'Simplilearn';
const greet = <h1>Hello, {name}</h1>;

The above code shows how JSX is implemented in React. It is neither a string nor HTML. Instead, it embeds HTML into JavaScript code.

Virtual Document Object Model (DOM)

The Virtual DOM is React’s lightweight version of the Real DOM. Real DOM manipulation is substantially slower than virtual DOM manipulate.

When the state of an object changes in a React application, VDOM gets updated. It then compares its previous state and then updates only those objects in the real DOM instead of updating all of the objects. This makes things move fast,

Components

In React, a component represents a part of the user interface, they are the building blocks of any React application.

Components are reusable, they can be used with different properties to display different information. For example, Sidenav can be used as left sidenav as well as right sidenav

Components are of two types -

Stateless Functional Components
Stateful Class Components

Functional Components — These are just JavaScript functions, they receive an object of properties which is referred to as props as the input and returns HTML (JSX) which describes the UI. Example:

Function Welcome(props) { return (<h1> Hello World, {props.name} </h1>);}

Class components — Class components are ES6 classes, it can optionally receive props as input and returns HTML (JSX). Class components can also maintain a private internal state which maintains its private information to describe the user interface. Example:

Class Welcome extends React.Component{ 
Render() {  return (<h1> Hello, {this.props.name} </h1>); }
}

Data Binding

Since React employs one-way data binding, all activities stay modular and quick. Moreover, the unidirectional data flow means that it’s common to nest child components within parent components when developing a React project.

State Management

React allows you to manage and update component-specific state using the setState method. By encapsulating the state within components, React promotes better organization and separation of concerns.

A state can be updated to event handlers, server responses, or prop changes. This is done using setState method.

this.setState({ quantity: value })

still some of the features are there, please check this out React Component Lifecycle, React Router, React Hooks.

Advantages and Limitations (Pros and Cons)

React JS, like any other technology, comes with its own advantages and disadvantages. Let’s explore them:

Advantages of React JS:

Component-Based Architecture: React’s component-based architecture promotes reusability and modularity, making it easier to build and maintain complex UIs.
Virtual DOM and Performance: React uses a virtual DOM, which allows it to efficiently update and render changes to the UI.
Large and Active Community: React has a large and active community of developers, which means there are plenty of learning resources, libraries, and tools available. This community support can help you find solutions to problems, stay up-to-date with best practices, and contribute to the growth of the ecosystem.
React Native: With React Native, you can leverage your React skills to build native mobile applications for both iOS and Android platforms. This allows for code reuse between web and mobile applications, saving time and effort.
SEO-Friendly: React enables server-side rendering (SSR), which improves search engine optimization (SEO) by rendering pages on the server and delivering pre-rendered HTML to search engines. This helps with discoverability and indexing of content.

Disadvantages of React JS:

Learning Curve: React has a steeper learning curve compared to simpler libraries or frameworks. Understanding concepts like components, JSX, and the React way of thinking may take time for beginners who are new to the React ecosystem.
Complex Tooling: React’s ecosystem has a variety of tools, build systems, and libraries available. This can sometimes make it overwhelming to choose the right tools and set up a development environment.
JSX Syntax: While JSX provides a powerful and flexible way to build UI components, some developers may find it challenging to mix JavaScript and HTML-like syntax within their codebase, especially if they are more familiar with traditional HTML templating.
Lack of Opinionated Structure: React is a library and not a full-fledged framework, which means it doesn’t enforce a specific structure or architecture. Developers need to make choices and adopt additional libraries or patterns to handle state management, routing, and other aspects of application development.

Is React Worth Learning?

Around the years, React has emerged as the most popular web framework among developers all over the world. Due to the ease it provides, React is preferred by the majority of enterprises.

In comparison to other IT specialists, react developers make a lot of money. Brilliant individuals are in a growing market worldwide because of the increasing need for React among businesses.

According to Indeed, the US average salary for React developers is between 55k and 110k USD. The Google Trends figure demonstrates the rate at which React’s reputation has been steadily increasing as a result of the addition of additional features throughout time.

So finally, learning react js from my perspective definitely gone be worth it.

Learning Ways

Still there are many blogs, videos, courses are available in online here i had mentioned some sites that are best for beginners to start and grow quickly.

Videos :
Html Css Js : https://www.youtube.com/watch?v=zJSY8tbf_ys

React Js : https://www.youtube.com/watch?v=bMknfKXIFA8

Website: https://www.w3schools.com/default.asp

Conclusion

Congratulations on starting your first React web app! In this blog post, we covered the topics started from what is an react to build our first react app . You’re now ready to dive deeper into React and build amazing web applications.

Writer: Ajay