training material.md

Training Material

Learning Path

REST API

1. Watch the first 10 minutes of this video to learn about REST API, and HTTP methods:

• REST API

2. This is a complementary resource for HTTP methods:

• HTTP Methods

You should activate the virtual environment each time when starting to work on the project and deactivate it after your work is finished

• create the virtual environment:

1. py -m pip install virtualenv
2. py -m venv foldername(e.g env)

• Activate and deactivate:

3. activate: .\env\Scripts\activate
4. deactivate: deactivate

• You may use Conda virtual environment as an alternative:
• Conda Virtual Environment

Django

• Through the following video learn thsese concepts in Django: Python Django Web Framework - Full Course for Beginners

  • Note that Since we use React for Front-End, which you will learn more about later, we do not use forms.
  • Watch the first hour of the video
  • Installing. Virtual environment
  • Django settings
  • Built-In components
  • New model fields
  • Custom homepage
  • URL routing

• The result for our project in admin page looks like this:

• 

2. Whenever you face a problem with implementation of Django syntax and structure search it in Django documentation:

• Django Documentation

  • In Django Documentation:
    • Learn about Field Types: Field Types

3. Underestanding Django models relationships( One-To-Many, Many-to-Many, One-to-One):

• Django Model Relationships

3. What are Meta classes: Meta classes

4. Start working with Django Rest Framework through using its Serializers, views and URLs features in your project and show the information in JSON:

• Django-REST-Framework
• The Result for our course-outline project looks like this:
• 
• Use Serializer to translate Django models into other formats so you will be able to send data over network or store in files.
• Difference between Model Serializer and Hyperlinked serializer
• Use Routers to map the incoming request to proper viewset action based on the request method type (i.e GET, POST,etc)
• Use class-based views to take Web Requests and return Web response.

React and JavaScript

1. Become familiar with HTML DOM(Document Object Model),which is the logical structure of documents and the way a document is accessed and manipulated, element and attribute concepts:

• HTML DOM

2. How browser rendering works(behind the scenes)

• Critical Rendering Path
• Critical Rendering Path

3. Create a React app:

• create-react-app

4. Basic React folder structure:

• Folder Structure

5. If you are not familiar with JavaScript syntax and data structure, learn:
   • Different types of variables: Var, Let, Const and their scopes
   • Escape quote in strings
   • work with Strings, Arrays, Functions,
   • Work with Objects, properties, methods ( access properties, update properties, delete properties, manipulate complex objects)
   • Destructuring syntax in objects
   • Destructuring syntax in arrays
   • Copy objects
   • Copy arrays
   • Ternary or inline if-else to write if conditional inside JSX elements -- another resource Inline If-Else with Conditional Operator
   • Learn Arrow Functions and where to use them to write shorter function syntax-- another resource Arrow Functions
   • template literals -- another resource template literals

• from Learn JavaScript - Full Course for Beginners
• Here is a complementory resource for JavaScript* and learn target Event Property and Onchange event from here:
• JavaScript

7. This is a step by step tutorial to learn about React, states and props:

• React
• state and props
• Example of sending and recieving props in functional components:
• props in functional components

8. Watch this video to learn about difference between class components and function components with hooks, useState and useEffect :

• useState and useEffect
• This is React documentation for hooks. Just skip “Hooks at a Glance” if you are not familiar with React Hooks :
• React Hooks

9. You will need React Router, to navigate between the pages of a website. Watch the first 17 minutes of this video:

• React Router
• This is React Router documentation:
• React Router Documentation
• React Router Match
• How to pass props to a component in React Router:
• Pass props to components
• "link" tag, Provides declarative, accessible navigation around your application
• React Router Link
• you can send information to the next page through the "state" object of "Link":
• Link - state

10. Use spread syntax where zero or more arguments (for function calls) or elements (for array literals) or key-value pairs (for object literals)are expected:

• Spread Syntax

11. To connect front-end with back-end, you will need to send HTTP request using axios. "In axios API" section you will see how you can implement it:

• Axios

Most common Errors you may face in this part:

• When sending HTTP request to the backend, you may face "Reason: CORS header 'Access-Control-Allow-Origin' missing" error. Read more why this error happens:
  • Reason
  • Fix the Error
  • to fix the error you need to write "ALLOWED_HOSTS = ['*']" in setting of your application as well.
  • Read more about Middleware functionality and find the reason why you changed it:
  • Middleware

12. Notice where you can put javascripts expressions:

• Embedding Expressions in JSX

13. You may not be able to use if-else conditions as well as for loop inside JSX, to implement them inside JSX you will need to learn about map function to implement for loop:

• map function

14. What do curly braces mean in JSX (React)? curly braces
15. Learn how to export parameters from modules: export

Styling:

1. Instead of CSS we use material ui, which is a user interface library for React: Install Material UI

• In Material UI go to component section, learn how to use "Container , paper, Grid, Button, Checkbox, Select, Text Field, Divider, Table" and their APIs( what are their inputs).

Important Notes:

1. Difference between functions and functional component:

• Functional components should always return a JSX element.

2. What does useEffect do?

• By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates.

3. Why does React have to use setState for state update?

• The idea behind that is that in order to track changes in state and than re-render the component according to the changes, you have to use setState, because after setState, the render function is triggered.
• setState

4. Note that each functional component can just be declared in another functional component.
5. If functional components are used inside JSX, their name should start with uppercase character