PIAIC-React-Assignment

React. js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

Assignments

1. TODO APP

2. Ecommerce App

Develop Ecommerce-App using React Hooks
Project Description

---

Starter-kit

1. React-Template
2. React-Hooks-with-Boostrap-Kit
3. JSON-Server
4. React-Router-DOM
5. React-Redux-Template
6. React-Redux-TypeScript-Template
7. React-Redux-App
8. React-ContextAPI-Hooks
9. React-Material-UI-Contentful

---

Start Project

$ npm install - React install dependencies from package.json
$ npm start - react-scripts start
$ npm build - react-scripts build
$ npm test - react-scripts test
$ npm eject - react-scripts eject

---

Create a New React App

Install NodeJS LTS Version
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine
Download Node.js

$ npx create-react-app my-app
$ cd my-app
$ npm start

Complete React Tutorial for Beginners (2020)

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster.

---

React Documentation

1. Getting Started
2. React Component
3. Components and Props
4. State and Lifecycle
5. Hooks API Reference
6. React Lifecycle Methods Diagram
7. State Management with React Hooks and Context API in 10 lines of code!
8. RxJS with React Hooks for state management

11 React Boilerplates and Starter Kits for 2019

Boilerplates

React libraries

1. Create React App Create React App is a command line interface created by Facebook developers that enables you to easily create a React.js project. It builds structures of catalogs and files, includes tools needed at the start and helps you build, test and launch your application.

2. React Router React Router, a group of navigational components, synchronizes the components of the UI with browsers address. This makes it effortless to handle navigation in SPA.

3. Material UI Material-UI is an open-source project that features React components that implement Google's Material Design.

4. Styled Components Styled Components are one of the new ways to use CSS in modern JavaScript. It is the meant to be a successor of CSS Modules, a way to write CSS that's scoped to a single component, and not leak to any other element in the page.

5. Redux Redux is a predictable state container for JavaScript applications. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. Simply put, Redux is a state management tool.

6. Redux-observable Redux-observable is a tool for handling async logic with React and Redux. This is important because React doesn't generally support async functions. Redux-observable is an interesting alternative to redux-saga and redux-thunk, particularly if you're already experienced with RxJS.

7. Redux Thunk Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store's dispatch method, which is then used to dispatch regular synchronous actions inside the body of the function once the asynchronous operations have completed.

8. RxJS RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code. ... RxJS provides an implementation of the Observable type, which is needed until the type becomes part of the language and until browsers support it.

9. React bootstrap React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery. As one of the oldest React libraries, React-Bootstrap has evolved and grown alongside React, making it an excellent choice as your UI foundation.

10. React Spinner

11. React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects. Scroll down to see it in action.

12. Semantic UI Semantic UI is a UI component framework for theming websites. Semantic UI enables developers to build websites with fast and concise HTML, along with a complete mobile responsive experience. Semantic UI treats words and classes as exchangeable concepts.

13. OnsenUI All animations in Onsen UI have been tuned and optimized to perform well on a wide range of devices. We take great care to ensure that apps made using Onsen UI feel smooth even on lower end devices.

14. React DnD React DnD is a set of React utilities to help you build complex drag and drop interfaces while keeping your components decoupled.

15. React Virtualized

16. React Desktop

17. Redux-Saga Redux-saga is a library that aims to make side effects easier and better by working with sagas. ... In the context of Redux, a saga is implemented as a middleware (we can't use a reducer because this must be a pure function) to coordinate and trigger asynchronous actions (side-effects).

18. Redux Actions

19. AXIOS Axios is a Promise-based HTTP client for JavaScript which can be used in your front-end application and in your Node. js backend. By using Axios it's easy to send asynchronous HTTP request to REST endpoints and perform CRUD operations.

---

For all the assignments that you complete in the class or in the video lectures, you will need to upload them to a single GitHub repository. After that, you will need to attach the GitHub link in a Google Form. By doing this, it will make it easier for us to check and grade your assignments.

https://forms.gle/8mQA2WFBzSYokuQ66