REACTJS

What is ReactJS?

- A js library for building user interfaces - usually referred to as a framework - comparable to vue and angular - the reason its considered a library is bc it doesn't have some of the things vue and angular have like a built in routing system for example, have to install a package called react-router-dom - has ecosystem of packages you can install to use it as a framework - strictly frontend, meaning that it runs in the browser - runs on the client as a SPA, but can be used to build full stack apps by communicating with a server/API (e.g. MERN Stack) - MERN: MongoDB(database), Express(Backend Framework), React, Node.js(Javascript runtime)

Components

- classes: render/return JSX - functions: return JSX - components can take in props - props are basically attributes

State

- components can have state which is an object that determines how a component renders and behaves - "App" or "global" state refers to state that is available to the entire UI, not just a single component - sometimes you have a ton of app level state that gets difficult to manage - in this case you can use built in api called context to help manage these app level states - third party state manager called redux can also be used for this purpose

useState

- import { useState } from 'react' - a hook for changing state of a component - state is immutable - one way data, to change it you have to recreate it and send it down

Files

- index.html: the single page in the spa - <div id="root"></div> - the parent element to everything - index.js: document.getElementById('root') - grabs the app component and renders to the root element - app.js: contains the root app component - <App /> - all of the components we create will be in the app component

proptypes

- proptypes aren't necessary, but makes your code more robust and catch errors before they happen

React Hooks

- react hooks are functions that let us hook into the react state and lifecycle features from function components - useState: Returns a stateful value and a function to update it - useEffect: Perform side effects in function components - example: to make http requests when the page loads - useContext, useReducer, useRef: ...

Render

- render method returns a description of what you want to see on the screen. React takes the description and displays the result. - render returns a react element, which is a lightweight description of what to render

JSX

- syntax extension to JavaScript. - use it to describe what the UI should look like. - comes with the full power of javascript - produces react elements

Babel

...

Why use React?

1. provides a way to structure the view layer of your application - MVC(Model, View, Controller) is a popular design pattern for software - Model: Deals with the data - View: the UI - Controller: Deals with the requests and routing - trying to create a large frontend project can get messy with just html/css and js - react allows you to use reusable components, dont seperate markup from logic - JSX allows us to use logic in the components 2. reusable components with their own state 3. JSX - Dynamic markup 4. interactive UIs with virtual DOM - allows us to update parts of the page that need to be updated without reloading the entire browser 5. Performance and Testing 6. Very popular in the industry

Key Features of React

Allows you to use 3rd party libraries Time-Saving Simplicity and Composable Fully supported by Facebook. Better user experience and very fast performance. Faster Development Code Stability with One-directional data binding React Components

Key Features of Angular

Built-in support for AJAX, HTTP, and Observables Large community support Consistent with technology Typescript offers efficiency Cleaner and crisp Coding Enhanced support for error handling Seamless updates using Angular CLI Forms and validation Shadow DOM / local CSS UI and Business Logic Separation

Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions or classes. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen. React elements can represent DOM tags and user-defined components. When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object "props". Always start component names with a capital letter.

Rendering Elements

Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen. Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

React only updates what is necessary

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.

Updating the Rendered Element

React elements are immutable. Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.

Why JSX?

React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called "components" that contain both. JSX prevents injection attacks. It is safe to embed user input in JSX. By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

Handling Events

React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

Advantages of ReactJS

SEO friendly: Where all the JavaScript frameworks are reactive towards SEO, ReactJS does a marvellous job in that. You are able to run ReactJS on the server and the virtual DOM will be returned and rendered to your browser as a regular web page. You don't need to apply any other tricks! JSX: It is an HTML-like syntax that compiles down to JavaScript. For JSX, markup and codes are composed in the same file. This means code completion gives you a helping hand as you type references to your component's functions and variables. When comparing Angularjs vs Reactjs, the latter's string-based templates come with the usual downsides: There is no code colouring in many editors, limited code completion support, and run-time failures. Hence ReactJS is ahead in this. Great User Interface: React Native is much more focused on the user interface, unlike AngularJs. It gives your users a highly responsive interface with the help of JavaScript interactions between the Native environment of the device and ReactJS Native. Therefore, this increases the application's load time and helps to keep it running smoothly without any interruptions. Highly efficient: React.js creates its own virtual DOM where your components are kept. This approach gives developers high flexibility and amazing performance gains because ReactJS calculates what change is needed to be made in the virtual DOM in advance and updates the DOM-trees accordingly. In the React js development, developers avoids costly DOM operations and does updates in a very efficient manner.

state

State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating the rule with props.

What is the DOM

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page. A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Angular vs. ReactJS

The biggest difference lies in state management. Angular comes with data-binding bundled in, whereas React today is usually augmented by Redux to provide unidirectional data flow and work with immutable data. AngularJS is a structural framework for developing dynamic web apps, whereas React is a javascript library that allows you to build UI components. Angular JS is based on MVC (Model View Controller) whereas React is based on Virtual DOM. Angular is based on Typescript and React is based on Javascript.

lifecycle methods

componentDidMount() componentWillUnmount()

Props

props are read only. Whether you declare a component as a function or a class, it must never modify its own props. All React components must act like pure functions with respect to their props.