React JS Documentation - bounswe/2021SpringGroup4 GitHub Wiki

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Environment Setup

NodeJS is the platform needed for the ReactJS development. You should install Node.js.

1.After successfully installing NodeJS, we can start installing React upon it using npm. You can install ReactJS in two ways

  a.Using webpack and babel.

  b.Using the create-react-app command.

2.I prefer the second one. Open a folder called "react" , then open command-prompt(Terminal). Write "npx create-react-app" command to the terminal.

Install Packages

a) Main libraries

If you pull the react code from the github repos, they don't have npm libraries( node-modules folder). So first you should install libraries.

npm install

b) Auxillaries

I installed some packages,so you should need them.

npm install [email protected]

npm install jwt-decode

npm install axios --save

npm install --save react-google-maps

npm i react-comments-section

c) Google Maps Autofill

install react-google-autocomplete

Run the Server

npm start

Dockerize the backend

Open a terminal (code\backend):

docker-compose build --no-cache

docker-compose up

Open a new terminal:

First step : docker-compose exec backend bash

Second step : python manage.py flush

Third step: python manage.py makemigrations authentication

Fourth step: python manage.py makemigrations events

Fifth step : python manage.py migrate

CORS FIX

Adding CORS headers allows your resources to be accessed on other domains. It's important you understand the implications before adding the headers, since you could be unintentionally opening up your site's private data to others.

Django Cors Headers

Google Maps API - React Configuration

https://tomchentw.github.io/react-google-maps/#usage--configuration

**Open command line from folder : Type cmd in the file path and enter

REACT UNIT TESTING

important sources:

React Testing Library : https://testing-library.com/docs/react-testing-library/intro/

Blog : https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

First of all, a file is created as name.test.js. Necessary tests are written to this file.

Then the command is run : npm run test