Introduction to React JS for beginners | Namespace IT

Introduction to React JS for beginners | Namespace IT

• 1.
  React JS Abu BakerSiddik Junior Software Engineer Namespace IT
• 2.
  What is ReactJS? React is a component-based JavaScript library for building user interfaces. It is used to build single page applications (SPA) and allows us to create reusable UI components.
• 3.
  What is Singlepage application (SPA)? A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server,
• 4.
  Why use React? Simplicity:component-based approach, well-defined lifecycle, and use of just plain JavaScript Easy to learn: basic previous knowledge in programming can easily understand React Native Approach: make IOS, Android and Web applications Data Binding: uses one-way data binding Performance Testability
• 5.
  Fundamentals of React Component Props State Lifecycle Hooks JSX VirtualDOM
• 6.
  Component Components are self-containedreusable building blocks of web application.
• 7.
  Types of components Thereare two types of components 1. Class Base Component 2. Functional Component
• 8.
  Props React allows usto pass information from one component to another using something called props (stands for properties). Props are basically kind of global variable or object.
• 9.
  State State is aJavaScript object that stores a component's dynamic data and determines the component's behaviour.
• 10.
  Props vs State Ina React component, props are variables passed to it by its parent component. State on the other hand is still variables, but directly initialized and managed by the component. The state can be initialized by props.
• 11.
  LIFECYCLE
• 12.
  Hooks  Basic Hooks useState  useEffect  useContext  Additional Hooks  useReducer  useCallback  useMemo  useRef  useImperativeHandle  useLayoutEffect  useDebugValue Hooks are a new addition in react 16.8. They let you use state and other react features without writing a class.
• 13.
  JSX JSX stands forJavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
• 14.
  Virtual DOM DOM standsfor 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements that are present in a webpage or web-app. It contains a node for each HTML element present in the web document. Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties.
• 15.
  Who uses React?
• 16.
  Any Question?
• 17.
  Thank You