React

What is React?

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. 

Why React?

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:

  • Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.
  • Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do. 
  • Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
  • Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.
  • Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.
  • It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.
  • Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.

The above reasons more than justify the popularity of the React library and why it is being adopted by a large number of organizations and businesses. 

 

 

  • warm up
  • Introductions
  • Discuss React Native experience and preconceptions of attendees
  • Present agenda

  • Describe React Native
  • Create an app with react-native init
  • Use react-native run-ios/android to run the app
  • Describe react-native-packager

  • List all ES6 and ES7 features (one per slide, w/o going into details)
  • Explain JSX
  • React Component lifecycle
  • A couple of exercises to make everyone comfortable with React / JavaScript

  • Describe all core components and their props
  • Use props to pass data into a component
  • Create functional components
  • Add state to components
  • Use the this keyword
  • Update state with setState
  • Use PropTypes
  • Use controlled components

  • Describe StyleSheet, what are available values, how it works
  • Demonstrate Flexbox
  • Mention that there are UI kits, but we are not going to use them as it’s too advanced for now
  • Mention that there are cross-platform styling techniques, like styled-components one can use
  • Flexbox and its properties - implement column/grid layout as presented on a slide
  • navigation
  • List available navigation solutions
  • Brief readers into the one that was selected
  • Make them aware of the API and how to think of the route hierarchy
  • A couple of exercises working on current `init` template, e.g convert app to a stack, so we can push a new route

  • List available scroll solutions
  • Explain when to use each
  • Describe performance optimizations
  • Warn about common pitfalls / issues

  • Introduce Redux
  • Set up a basic redux implementation
  • Add Thunk middleware for asynchronous actions
  • Fetching data and updating our redux store

    • Hyper Text Transfer Protocol (HTTP)
    • Introduction to HTTP
    • HTTP Parameters
    • HTTP Messages
    • HTTP Request
    • HTTP Response
    • HTTP Methods
    • HTTP Status Code
    • HTTP Header Fields
    • Registration
    • HTTP Authentication
    • HTTP Caching
    • HTTP URL Encoding
    • HTTP Security

    Course Info

    • Instructor:
    • Lectures:
    • Quizzes:
    • Seat Available:
    • Duration:
    Get Course