"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figure: "figure", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "ReactJS has become a staple in the world of web development, especially for building dynamic single-page applications (SPAs). If you’re new to React, this guide will help you understand the basic concepts, why it’s essential, how it works, the problems it solves, its benefits, and the types of applications you can build with it. We’ll also cover the prerequisites for learning ReactJS and explore why it has become the most popular library for SPAs." }), "\n", _jsx(_components.h2, { children: "Why ReactJS?" }), "\n", _jsx(_components.p, { children: "ReactJS is a JavaScript library developed by Facebook for building user interfaces, particularly SPAs. Here’s why it’s so valuable:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Component-Based Architecture" }), ": React allows developers to build encapsulated components that manage their own state. These components can be reused, making development more efficient and easier to manage."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Virtual DOM" }), ": React uses a virtual DOM to improve performance. Instead of updating the real DOM directly, React updates a virtual representation, which is then reconciled with the real DOM in the most efficient way possible."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Declarative Syntax" }), ": React’s declarative syntax makes code more predictable and easier to debug."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Large Ecosystem" }), ": With a vast array of libraries and tools, React’s ecosystem supports almost any feature you might need in a web application."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Understanding the Building Blocks" }), "\n", _jsx(_components.p, { children: "Reactjs follows the atomic structure for building any application. The atomic structure allowed us to break complex structure into smaller re-useable components. Reactjs makes the workflow easy by building a new syntex for writing HTML inside javascript called JSX. It also allowed us to manage state and sharing data between different components." }), "\n", _jsx(_components.h3, { children: "1) Components" }), "\n", _jsx(_components.p, { children: "Components are the building blocks of a React application. They can be functional or class-based. Here’s a simple functional component:" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Welcome" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "props" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, {props.name};" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Welcome;" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "2) JSX" }), "\n", _jsx(_components.p, { children: "JSX is a syntax extension that looks similar to XML or HTML. It allows you to write HTML-like code within JavaScript. JSX makes your code more readable and easy to write." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " element" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">Hello, world!;" })] }) }) }) }), "\n", _jsx(_components.h3, { children: "3) State and Props" }), "\n", _jsx(_components.p, { children: "State is an object that determines how a component renders and behaves. Props are inputs to components. They are passed from parent components and are immutable." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "jsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " React " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " 'react'" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " CounterApp" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "props" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ReactJS: State Management using useState() Hook" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "count" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "] " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useState" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "0" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // Rendering UI" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "h1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{props.appName}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(count " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "-" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}>Descrement(-)" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{count}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "button" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{() " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setCount" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(count " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "+" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 1" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}>Increment(+)" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Welcome;" })] })] }) }) }), "\n", _jsx(_components.h2, { children: "How ReactJS Works" }), "\n", _jsx(_components.p, { children: "ReactJS works by maintaining a virtual DOM. When a component’s state changes, React updates the virtual DOM first. It then compares the virtual DOM with the real DOM and only updates the parts of the real DOM that have changed. This process is called reconciliation." }), "\n", _jsx(_components.h2, { children: "Problems ReactJS Solves" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Complex State Management" }), ": Managing state in large applications can be cumbersome. React’s state management (often enhanced with tools like Redux) simplifies this process."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "UI Performance" }), ": Frequent updates to the real DOM can be slow. React’s virtual DOM optimizes this by minimizing direct DOM manipulations."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Reusability" }), ": Components in React can be reused across different parts of an application, reducing redundancy and improving maintainability."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Benefits of Using ReactJS" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Efficiency" }), ": The virtual DOM ensures efficient updates and rendering."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Flexibility" }), ": React can be used for various applications, not just SPAs. It’s flexible enough to be integrated with other libraries or frameworks."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Strong Community Support" }), ": React has a massive community, offering extensive resources, third-party libraries, and tools."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Types of Applications You Can Build" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Single Page Applications (SPAs)" }), ": React excels in creating fast, responsive SPAs."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Mobile Applications" }), ": With React Native, you can build mobile applications for iOS and Android using the same principles."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Progressive Web Apps (PWAs)" }), ": React can be used to build PWAs that offer a native app-like experience."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Static Sites" }), ": With frameworks like Gatsby, you can build static sites using React."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Prerequisites for Learning ReactJS" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "HTML/CSS" }), ": Basic understanding of HTML and CSS."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "JavaScript" }), ": A solid grasp of JavaScript fundamentals (ES6 and beyond)."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Command Line" }), ": Basic familiarity with command line operations."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Node.js and npm" }), ": Understanding of Node.js and npm for package management."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Why ReactJS is the Most Popular Library for SPAs" }), "\n", _jsx(_components.p, { children: "ReactJS’s popularity can be attributed to several factors:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Performance" }), ": The virtual DOM enhances performance.\nEase of Learning: React’s component-based approach and JSX make it easier to learn and use."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Flexibility" }), ": It can be used with other frameworks and libraries."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Strong Ecosystem" }), ": A vast ecosystem of tools and libraries that support development."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Community Support" }), ": A large, active community that continuously contributes to its growth and improvement."] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Create and Run Reactjs Project" }), "\n", _jsx(_components.p, { children: "You can use Create React App to set up a new project quickly, or use Vite to create a new project." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { tabIndex: "0", "data-language": "shell", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "shell", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "# CRA (Create React APP)" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npx" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " create-react-app" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-app" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: "cd" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-app" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "# used to run your project" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " start" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "# Using Vite and choosing options" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " create" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " vite@latest" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "# or select a template directly " }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " create" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " vite@latest" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-react-app" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --template" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " react" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: "cd" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " my-react-app" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "# used to run your project" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " run" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " dev" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["This will start the development server and open your new React application in the default web browser. By default, create-react-app served at Port: ", _jsx(_components.code, { children: "3000" }), " available at ", _jsx(_components.code, { children: "http://localhost:3000" }), ". Whereas, react application created using vite is served at Port: ", _jsx(_components.code, { children: "5173" }), " and available at ", _jsx(_components.code, { children: "http://localhost:5173" }), "."] }), "\n", _jsx(_components.h2, { children: "Conclusion" }), "\n", _jsx(_components.p, { children: "ReactJS is a powerful library that simplifies the process of building dynamic and efficient user interfaces. Its component-based architecture, virtual DOM, and strong community support make it an excellent choice for both beginners and experienced developers. By understanding the basics and gradually building more complex applications, you can leverage React to create impressive web applications." }), "\n", _jsxs(_components.p, { children: ["This blog is originally posted at ", _jsx(_components.a, { href: "https://programmingly.dev", children: "Programmingly.dev" }), ". Please read full article at: ", _jsx(_components.a, { href: "https://programmingly.dev/the-fundamentals-of-reactjs-a-rich-understanding-of-its-basics/", children: "The Fundamentals of Reactjs: A Rich understanding of its basics." })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };