Скачать или смотреть 9 REACT Getting Data from Django API (SILENT)

Objective: Displaying Students records using REACT, getting data from Django API

1. installing 'react-router-dom'
C:\StudentExample\reactui$npm install react-router-dom

2. Opening react code
C:\StudentExample\reactui$ code .

3. Implementing navigation in 'App.js'
-------
4. Using windows explorer goto 'StudentAPI' folder then type 'cmd' to open console window,
then activate virtual environment
C:\StudentExample\StudentAPI$

(use 'tab' key and '\' to select activate command without going inside folder)
C:\StudentExample\StudentAPI$stuenv\Scripts\activate

5. Installing django-cors
(stuenv) C:\StudentExample\StudentAPI$ pip install django-cors-headers

6. Open API code in VS Code
(stuenv) C:\StudentExample\StudentAPI$cd _studentAPI
(stuenv) C:\StudentExample\StudentAPI\_studentAPI$code .


7. In 'settings.py' Include 'corsheaders' in 'INSTALLED_APPS' section
write 'corsheaders.middleware.CorsMiddleware' in 'MIDDLE_WARE' section


8. Add new section to setting.py
CORS_ALLOWED_ORIGINS = [
"http://127.0.0.1:3000"
"http://localhost:3000",

]

8. Run the Djagno API
(stuenv) C:\StudentExample\StudentAPI\_studentAPI$py manage.py runserver


9. Open Swagger UI and check the GET method
http://127.0.0.1:3000/swagger/
------
10. in REACT app, update student.js and write following portions
1. constructor to initialize attributes of Student Component with default values
2. define 'refreshList()' function to fetch data from student API, call it in 'componentDidMount()'
3. in 'render' function draw student table headers and then rows with the help of .map loop on students list

11. Run the REACT app (if not already running) and review student table
C:\StudentExample\reactui$ npm start

12. Debug code if there is any logical mistake