Scribd Logo
Upload

Welcome to Scribd!

  • 138 views

    React JS

    Uploaded by

    Parth Vora

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    React JS

    Uploaded by

    Parth Vora
    138 views25 pages

    Original Title

    React-JS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    138 views25 pages

    React JS

    Uploaded by

    Parth Vora

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 25

    REACTJS

    ReactJS is a JavaScript Library created by Facebook for creating dynamic and interactive
    applications and building better UI/UX design for web and mobile applications. React is an
    open-source and component-based front-end library. React is responsible for the UI design.
    React makes code easier to debug by dividing them into components.
    Features of React:
    •JSX (JavaScript Syntax Extension)
    •Virtual DOM
    •One-way data binding
    •Performance
    •Extensions
    •Conditional statements
    •Components
    •Simplicity
    JSX(JavaScript Syntax Extension):

    JSX(JavaScript Syntax Extension): JSX is a combination of HTML and JavaScript. You


    can embed JavaScript objects inside the HTML elements. JSX is not supported by the
    browsers, as a result Babel compiler transcompile the code into JavaScript code. JSX
    makes codes easy and understandable. It is easy to learn if you know HTML and
    JavaScript.
    Virtual DOM:

    DOM stands for Document Object Model. It is the most important part of the web as it
    divides into modules and executes the code. Usually, JavaScript Frameworks updates the
    whole DOM at once, which makes the web application slow. But react uses virtual DOM
    which is an exact copy of real DOM. Whenever there is a modification in the web application,
    the whole virtual DOM is updated first and finds the difference between real DOM and
    Virtual DOM. Once it finds the difference, then DOM updates only the part that has changed
    recently and everything remains the same.
    One-way Data Binding:

    One-way data binding, the name itself says that it is a one-direction flow. The data in
    react flows only in one direction i.e. the data is transferred from top to bottom i.e. from
    parent components to child components. The properties(props) in the child component
    cannot return the data to its parent component but it can have communication with the
    parent components to modify the states according to the provided inputs. This is the
    working process of one-way data binding. This keeps everything modular and fast.
    Performance: As we discussed earlier, react uses virtual DOM and updates only the modified parts.
    So , this makes the DOM to run faster. DOM executes in memory so we can create separate
    components which makes the DOM run faster.

    5. Extension: React has many extensions that we can use to create full-fledged UI applications. It
    supports mobile app development and provides server-side rendering. React is extended with Flux,
    Redux, React Native, etc. which helps us to create good-looking UI.
    Conditional Statements:

    JSX allows us to write conditional statements. The data in the browser is displayed according to
    the conditions provided inside the JSX.
    Components:

    React.js divides the web page into multiple components as it is component-based. Each
    component is a part of the UI design which has its own logic and design as shown in
    the below image. So the component logic which is written in JavaScript makes it easy
    and run faster and can be reusable.
    Simplicity: React.js is a component-based which makes the code reusable and React.js
    uses JSX which is a combination of HTML and JavaScript. This makes code easy to
    understand and easy to debug and has less code.
    Simple Hello World Program in
    ReactJS
    To create a react application, Node.js version of at least 10 or higher need to be
    installed on your system. If it is installed you can check by using the following
    command in your command line.

    To build a react application follow the below steps:


    Step 1: Create a react application using the following command
    Step 2: Once it is done change your directory to the newly created application using the following
    command

    Step 3: Now inside App.js and write down the following


    code as shown below:
    React.js without
    JSX
    ReactJS JSX
    JSX stands for JavaScript XML. JSX is basically a syntax extension of JavaScript. It helps us to
    write HTML in JavaScript and forms the basis of React Development.

    JSX creates an element in React that gets rendered in the UI. It is transformed into JavaScript
    functions by the compiler at runtime. Error handling and warnings become easier to handle
    when using JSX

    The above code snippet somewhat looks like HTML and it also uses a JavaScript-like variable but is
    neither HTML nor JavaScript, it is JSX(JavaScript XML). With the help of JSX, we have directly
    written the HTML syntax in JavaScript
    Features of JSX

    It is faster than normal JavaScript as it performs optimizations while translating to regular


    JavaScript.
    It makes it easier for us to create templates.
    Instead of separating the markup and logic in separate files, React uses components for this
    purpose. We will learn about components in detail in further articles.
    As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables,
    accept it as arguments, or return it from functions.
    Expressions in JSX

    In React we are allowed to use normal JavaScript


    expressions with JSX. To embed any JavaScript
    expression in a piece of code written in JSX we will have
    to wrap that expression in curly braces {}. The below
    example specifies a basic use of JavaScript Expression in
    React.
    •Creation of custom attributes:
    •We can also use custom attributes in JSX. For custom
    Attributes in JSX attributes, the names of such attributes should be
    prefixed by data-* attribute.

    JSX allows us to use attributes with the HTML elements just like we do with normal HTML. But
    instead of the normal naming convention of HTML, JSX uses the camelcase convention for
    attributes
    Conditions - if statements
    Children in JSX
    Consider a situation where you want to render multiple tags at a time. To do this we
    need to wrap all of these tags under a parent tag and then render this parent element
    to the HTML. All the subtags are called child tags or children of this parent element.
    Simple Application using JSX

    Simple Application Without JSX


    React Components

    Components are independent and reusable bits of code. They serve the same purpose
    as JavaScript functions, but work in isolation and return HTML.
    Components come in two types, Class components and Function components, in this
    tutorial we will concentrate on Function components

    Class Component
    Rendering a Component
    Props
    Components can be passed as props, which stands for properties.
    Props are like function arguments, and you send them into the component as attributes.

    You might also like