Skip to main content

What is react js?


 ReactJS is JavaScript library used for building reusable UI components. According to React official documentation, following is the definition −

React is a library for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. Lots of people use React as the V in MVC. React abstracts away the DOM from you, offering a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. React implements one-way reactive data flow, which reduces the boilerplate and is easier to reason about than traditional data binding.

React Features

  • JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.

  • Components − React is all about components. You need to think of everything as a component. This will help you maintain the code when working on larger scale projects.

  • Unidirectional data flow and Flux − React implements one-way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

  • License − React is licensed under the Facebook Inc. Documentation is licensed under CC BY 4.0.

React Advantages

  • Uses virtual DOM which is a JavaScript object. This will improve apps performance, since JavaScript virtual DOM is faster than the regular DOM.

  • Can be used on client and server side as well as with other frameworks.

  • Component and data patterns improve readability, which helps to maintain larger apps.

React Limitations

  • Covers only the view layer of the app, hence you still need to choose other technologies to get a complete tooling set for development.

  • Uses inline templating and JSX, which might seem awkward to some developersReact is an open source, JavaScript library for developing user interface (UI) in web application. React is developed and released by Facebook. Facebook is continuously working on the React library and enhancing it by fixing bugs and introducing new features. This tutorial starts with the architecture of React, how-to guide to setup projects, creating components, JSX and then walks through advanced concepts like state management, form programming, routing and finally conclude with step by step working example.

    Audience

    This tutorial is prepared for professionals who are aspiring to make a career in the field of developing front-end web application. This tutorial is intended to make you comfortable in getting started with the React concepts with examples.

    Prerequisites

    Before proceeding with the various types of concepts given in this tutorial, we assume that the readers have the basic knowledge in HTML, CSS and OOPS concepts. In addition to this, it will be very helpful, if the readers have a sound knowledge in JavaScript.

  • ReactJS is a simple, feature rich, component based JavaScript UI library. It can be used to develop small applications as well as big, complex applications. ReactJS provides minimal and solid feature set to kick-start a web application. React community compliments React library by providing large set of ready-made components to develop web application in a record time. React community also provides advanced concept like state management, routing, etc., on top of the React library.

    React versions

    The initial version, 0.3.0 of React is released on May, 2013 and the latest version, 17.0.1 is released on October, 2020. The major version introduces breaking changes and the minor version introduces new feature without breaking the existing functionality. Bug fixes are released as and when necessary. React follows the Sematic Versioning (semver) principle.

    Features

    The salient features of React library are as follows −

    • Solid base architecture
    • Extensible architecture
    • Component based library
    • JSX based design architecture
    • Declarative UI library

    Benefits

    Few benefits of using React library are as follows −

    • Easy to learn
    • Easy to adept in modern as well as legacy application
    • Faster way to code a functionality
    • Availability of large number of ready-made component
    • Large and active community

    Applications

    Few popular websites powered by React library are listed below −

    • Facebook, popular social media application
    • Instagram, popular photo sharing application
    • Netflix, popular media streaming application
    • Code Academy, popular online training application
    • Reddit, popular content sharing application

    As you see, most popular application in every field is being developed by React LibraryThis chapter explains the installation of React library and its related tools in your machine. Before moving to the installation, let us verify the prerequisite first.

    React provides CLI tools for the developer to fast forward the creation, development and deployment of the React based web application. React CLI tools depends on the Node.js and must be installed in your system. Hopefully, you have installed Node.js on your machine. We can check it using the below command −

    node --version

    You could see the version of Nodejs you might have installed. It is shown as below for me,

    v14.2.0

    If Nodejs is not installed, you can download and install by visiting https://nodejs.org/en/download/.

    Toolchain

    To develop lightweight features such as form validation, model dialog, etc., React library can be directly included into the web application through content delivery network (CDN). It is similar to using jQuery library in a web application. For moderate to big application, it is advised to write the application as multiple files and then use bundler such as webpack, parcel, rollup, etc., to compile and bundle the application before deploying the code.

    React toolchain helps to create, build, run and deploy the React application. React toolchain basically provides a starter project template with all necessary code to bootstrap the application.

    Some of the popular toolchain to develop React applications are −

    • Create React App − SPA oriented toolchain
    • Next.js − server-side rendering oriented toolchain
    • Gatsby − Static content oriented toolchain

    Tools required to develop a React application are −

    • The serve, a static server to serve our application during development
    • Babel compiler
    • Create React App CLI

    Let us learn the basics of the above mentioned tools and how to install those in this chapter.

    The serve static server

    The serve is a lightweight web server. It serves static site and single page application. It loads fast and consume minimum memory. It can be used to serve a React application. Let us install the tool using npm package manager in our system.

    npm install serve -g

    Let us create a simple static site and serve the application using serve app.

    Open a command prompt and go to your workspace.

    cd /go/to/your/workspace

    Create a new folder, static_site and change directory to newly created folder.

    mkdir static_site 
cd static_site

    Next, create a simple webpage inside the folder using your favorite html editor.

    <!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Static website</title> 
   </head> 
   <body> 
      <div><h1>Hello!</h1></div> 
   </body> 
</html>
  • Next, run the serve command.
    serve .

    We can also serve single file, index.html instead of the whole folder.
    serve ./index.html

    Next, open the browser and enter http://localhost:5000 in the address bar and press enter. serve application will serve our webpage as shown below.
    Hello
    The serve will serve the application using default port, 5000. If it is not available, it will pick up a random port and specify it.
    │ Serving!                                     │   
   │                                              │ 
   │ - Local: http://localhost:57311              │ 
   │ - On Your Network: http://192.168.56.1:57311 │ 
   │                                              │ 
   │ This port was picked because 5000 is in use. │ 
   │                                              │ 
   │ Copied local address to clipboard!
    Babel compiler
    Babel is a JavaScript compiler which compiles many variant (es2015, es6, etc.,) of JavaScript into standard JavaScript code supported by all browsers. React uses JSX, an extension of JavaScript to design the user interface code. Babel is used to compile the JSX code into JavaScript code.
    To install Babel and it’s React companion, run the below command −
    npm install babel-cli@6 babel-preset-react-app@3 -g
... 
... 
+ babel-cli@6.26.0 
+ babel-preset-react-app@3.1.2 
updated 2 packages in 8.685s
    Babel helps us to write our application in next generation of advanced JavaScript syntax.
    Create React App toolchain
    Create React App is a modern CLI tool to create single page React application. It is the standard tool supported by React community. It handles babel compiler as well. Let us install Create React App in our local system.
    > npm install -g create-react-app
+ create-react-app@4.0.1 
added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s
    Updating the toolchain
    React Create App toolchain uses the react-scripts package to build and run the application. Once we started working on the application, we can update the react-script to the latest version at any time using npm package manager.
    npm install react-scripts@latest

    Advantages of using React toolchain
    React toolchain provides lot of features out of the box. Some of the advantages of using React toolchain are −
    • Predefined and standard structure of the application.
    • Ready-made project template for different type of application.
    • Development web server is included.
    • Easy way to include third party React components.
    • Default setup to test the application.




Comments

Post a Comment

Popular posts from this blog

5 Essential CSS Tricks for Beginners

Welcome to TechBitu! If you're just starting out with web development, mastering CSS (Cascading Style Sheets) is crucial for creating visually appealing and responsive websites. In this guide, we'll cover five essential CSS tricks that every beginner should know. These tips will help you enhance your web design skills and create better user experiences. Let’s dive in! ### Table of Contents 1. [Centering with Flexbox](#centering-with-flexbox) 2. [Responsive Images](#responsive-images) 3. [Box Shadows](#box-shadows) 4. [Custom Fonts](#custom-fonts) 5. [Hover Effects](#hover-effects) ### 1. Centering with Flexbox One of the most common challenges in web design is centering elements both vertically and horizontally. Flexbox makes this task straightforward and efficient. ```css .container {     display: flex;     justify-content: center;     align-items: center;     height: 100vh; } ``` In this example, the `justify-content: center;` centers the child ...
Post a Comment
Read more

What is Blockenzyme?

  Blockenzyme: Revolutionizing the Technological Landscape In today’s fast-paced world, technology is rapidly changing the way we conduct business. To stay ahead of the curve, businesses must constantly adapt and innovate their operations. That’s where Blockenzyme comes in. Founded in 2023 by Swapnil Kole, a visionary in the field of technology, Blockenzyme provides innovative technology solutions to businesses and organizations of all sizes. Our team of experts has extensive experience in a wide range of technologies, including blockchain development, software engineering, and digital asset management. At Blockenzyme, we believe that technology is a powerful tool that can revolutionize the way businesses operate. That’s why our mission is to help businesses stay ahead of the curve in an ever-changing technological landscape. We’re dedicated to delivering cutting-edge solutions that help our clients streamline their operations, increase efficiency, and stay ahead of the competition...
Post a Comment
Read more

For Sale: Established Tech Blog with 200k+ Views

Are you looking for a prime opportunity to own a successful tech blog? We are offering our well-established blog, which focuses on cutting-edge AI technologies and innovative startups. Here’s why this could be your next great investment: Why This Blog? Impressive Traffic : With over 200k views, this blog has built a substantial and engaged audience. Focused Niche : Specializes in AI and tech startups, making it a valuable resource for tech enthusiasts and professionals. Current Revenue : Currently earning from a sponsored post, showcasing its potential to generate income. Growth Potential : Significant opportunities for increased revenue through additional ads, sponsorships, and expanded content. Key Features Established Platform : A reliable and respected blog with a loyal readership. Content Quality : High-quality, relevant content that attracts and retains readers. Revenue Opportunities : Room for growth in monetization through diversified advertising and sponsorship strategies. Wha...
Post a Comment
Read more