https://github.com/fadilxcoder/reactjs

ReactJS App / Udemy tutorials / Axios
https://github.com/fadilxcoder/reactjs

axios poc reactjs udemy

Last synced: 5 days ago
JSON representation

ReactJS App / Udemy tutorials / Axios

• Host: GitHub
• URL: https://github.com/fadilxcoder/reactjs
• Owner: fadilxcoder
• Created: 2023-07-04T19:06:24.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-07-24T17:35:05.000Z (over 1 year ago)
• Last Synced: 2024-04-15T03:46:20.079Z (7 months ago)
• Topics: axios, poc, reactjs, udemy
• Language: HTML
• Homepage:
• Size: 658 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Notes

ReactJS application / PHP API

Course Tuto : https://www.udemy.com/course/mern-stack-front-to-back/

`React Router` : This is a library that you can use to manage the routing in your React application.

`Redux` : This library can help you manage state in your React application.

Docs : https://github.com/facebook/create-react-app

---

- Install `npx create-react-app frontend`

- Run : `npm run client`

- Install these packages : `npm i axios react-router-dom redux react-redux redux-thunk redux-devtools-extension moment react-moment uuid`

- Add `"proxy": "http://users.php.sqlite.app.local/"` in `package.json`

- Components : `src/components/...`

- Routing setup : `App.js` - `import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';`

- Linking pages with `import {Link} from 'react-router-dom';` & `\frontend\src\actions\types.js` : Consist of variables / constant

```js

export const SET_ALERT = 'SET_ALERT';

export const REMOVE_ALERT = 'REMOVE_ALERT';

```

- `\frontend\src\actions\alert.js` : Middlewares

```js

import { SET_ALERT, REMOVE_ALERT } from './types';

import { v4 } from 'uuid';

export const setAlert = (msg, alertType, timeout = 5000) => dispatch => {

    const id = v4();

    dispatch({

        type: SET_ALERT,

        payload: {

            msg,

            alertType,

            id

        }

    });

    setTimeout(() => dispatch({

        type: REMOVE_ALERT,

        payload: id

    }), timeout);

}

```

- `\frontend\src\reducers\index.js` : List of reducers

```js

import { combineReducers } from "redux";

import alert from './alert';

export default combineReducers({

    alert

});

```

- `\frontend\src\reducers\alert.js` : Reducer

*Reducers take in two things: previous state and an action. Then they reduce it (read it return) to one entity: the new updated instance of state.*

- `\frontend\src\components` : UI

```js

import React from 'react';

import { connect } from 'react-redux';

const Alert = ({ alertState }) => 

    null !== alertState 

    && alertState.length > 0 

    && alertState.map(alert => (

        


            { alert.msg }

        

    ));


const mapStateToProps = state => ({

    alertState: state.alert

});

export default connect(

    mapStateToProps

)(Alert);

```