React

on
  • React is the javascript library to create websites maintained by Facebook.
  • Allows us to create Single Page Apps - SPA's.
  • JSX = Javascript XML which is just a javascript object as a HTML element.
  • To create a react app: npx create-react-app name.
  • It is responsible for the View Layer of your application. It is only responsible for rendering your user interface as well as updating the UI.
  • React's goal is to write maintainable and efficient code.
  • It does not come with a design system.
  • React is not part of the browser, so you must import it into the javascript file in which you will need it. With import React from "react'";
  • This is called a bare import because you are not importing from a file path.
  • When you import react you get a react object that contains methods and properties.
  • Every time you have an import in your code, pay attention that you are adding code to your application which is called Import Cost.
  • React creates a virtual representation of your User Interface (Virtual DOM) and then ReactDOM is the library that efficiently updates the DOM based on that virtual DOM.
  • The reason why the Virtual DOM exists is to figure out which parts of the UI need to be updated and then batch these changes together.
  • React is the library that lets you write reusable UI and then ReactDom makes the UI visible in the browser. React Native makes this UI visible in a native app.
  • React is creating the virtual representation of your UI in the memory, and then ReactDOM receives that and syncs your UI to the DOM. This process is called reconciliation.

  • We use ReactDom to render(visualize) our React Elements on the Page, and we render these elements in the element called root.
  • The root element you pass to ReactDOM will become completely managed by React. So you must not write any kind of JavaScript that changes its content
  • An app built with React usually has a single root element and the whole application is rendered inside that element.
  • JSX or JavaScript XML allows us to write HTML in react. It makes it easier to write and add HTML in react. JSX is syntactic sugar for React.createElement function. You need quotes around attribute values that are strings.
  • Since JSX is converted into a React.createElement() that returns an object, you can use JSX as an object.
  • You can use expressions in JSX by wrapping them with curly braces {}. You can also call functions inside those.
  • React.createElement takes all the arguments passed after the 2nd one and considers them children.
  • HTML has some self-closing tags like - img, br, hr. In JSX, you cannot open an element without closing it.
  • When returning elements in JSX, you can return only 1 element at a time. This element can have children.
  • Reacts solves this by making you return a fragment(<> </>) or React.Fragment that wraps the elements that you want to return.
  • A React component is a function that returns one React element which describes how a section of the User Interface should look like. 
  • This allows us to split your UI into independent, reusable pieces. Use UpperCamelCase for the name of your component.
  • React differentiates between an element and component with the first character of their name if the first letter is capital then it is a component otherwise it is an element.
  • A React component is a function that returns a React element.
  • Props is an object that you can pass into a component in React like <Name user="Yasho" .../> and can use inside it.
  • Children Props is the content that goes between the component tags and you can access it with props.children.
  • You can set a default value for props by giving your component class a property called named defaultProps which should be equal to an object.
  • A UI Kit is a collection of all the design elements that you will use in your apps. When building an app you may choose a ready-made UI Kit and customize it, or you can decide to build it yourself.
  • Benefits of a UI Kit: Maintain consistency, Update UI elements in one place.
  • A Class Component extends from the class React.Component.
  • It must contain a render method that has a return statement and returns a JSX expression.
  • There are two ways for a component to get dynamic info: props and state.
  • To make a component have a state, give it state property. This property should be declared inside of a constructor method of the class. The state must be provided an object.
  • A component can change its state by calling the function this.setState(); It takes an object and merges that object with the current state.
  • this.setState(); takes two arguments: an object that will update the component's state, and a callback, you will basically never need the callback.
  • Because of the way event handler works you have to bind a method that calls `this` and is going to be an event handler with the class instance with: this.method = this.method.bind(this) in the constructor.
  • this.setState() actually calls the render() method after its execution to update the virtual dom, this is because you cannot use it inside the render() function as it will cause an infinite loop.


  • React components are highly dynamic, they get created, rendered, added to the DOM, updated, and removed all of which are part of a component's lifecycle.
  • Mounting, when the component is being initialized and put into the DOM for the first time.
  • Updating, when the component updates as a result of a changed state or changed props.
  • Unmounting, when the component is being removed from the DOM.
  • Once a component instance is unmounted, that's it - it will never be re-mounted, updated, or unmounted.
  • In general, when a component creates a side-effect, you should remember to clean it up.
  • React has several methods, called lifecycle methods, that are called at different parts of a component's lifecycle.
  • constructor() is the first method called during the mounting phase.
  • render() is called later during the mounting phase, to render the component for the first time, and during the updating phase, to re-render it.
  • componentDidMount() is the final method called during the mounting phase.
  • componentWillUnmount() is called during the unmounting phase, right before the component is completely destroyed.
  • componentDidUpdate() is called in the updating phase and is a good place for update-phase work, it takes one argument which will be the props this component had the last time it was rendered.
  • In react, you can also define components with the help of a function called function components. They can do everything that a class component can do, however provide a more concise way of creating components.
  • Function components can receive information via props. To access these props, give your function component a parameter named props.
  • With HOOKS, we can use simple function components to do lots of fancy things that we could only do with class components in the past.
  • React Hooks, are functions that let us manage the internal state of components and handle the post-rendering side effects directly from our function components.
  • React offers a lot of built-in hooks, which include: useState(), useEffect(), useContext(), useReducer(), useRef().
  • useState() is a JavaScript function defined in the React library. When we call this function it returns two values in an array: Current State, State Setter (A function that we can use to update the value of the state).
  • The magic of useState() is that it allows React to keep track of the current value of the state from one render to the other.
  • const [color, setColor] = useState('default'); is the general syntax of using the useState() method.
  • If we do not pass any default value then it becomes undefined. Just for clarity, we should always specify the default value null if we do not need it.

Comments

Post a Comment