https://github.com/mbrsagor/youreacker
The project is React.JS basic to Advance topic. when sometimes forgot anything then I follow the repo. The repo is very helpful for every start-up react.JS developer.
https://github.com/mbrsagor/youreacker
context-api-react hooks-api-react reactjs redux
Last synced: 4 months ago
JSON representation
The project is React.JS basic to Advance topic. when sometimes forgot anything then I follow the repo. The repo is very helpful for every start-up react.JS developer.
- Host: GitHub
- URL: https://github.com/mbrsagor/youreacker
- Owner: mbrsagor
- Created: 2020-12-25T18:39:43.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-25T18:04:54.000Z (almost 4 years ago)
- Last Synced: 2025-01-12T13:25:22.480Z (5 months ago)
- Topics: context-api-react, hooks-api-react, reactjs, redux
- Language: JavaScript
- Homepage:
- Size: 1.37 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# YouReacker
> The repo is pure React.JS project where has basic to advance topic in react.js step by step.
#### Install and run the repo in your local dev server.
The following steps will walk you thru installation on a Mac. I think linux should be similar. It's also possible to develop on a Windows machine, but I have not documented the steps. If you've developed the `React` apps on Windows, you should have little problem getting up and running.
```base
git clone https://github.com/mbrsagor/youReacker.git
cd youReacker
yarn install
yarn start
```
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
###### Context API
```javascript
import React, { Component, createContext } from 'react'
const Profile = () => {
return (
{value => (
Name: {value.user.name}
Email: {value.user.email}
)}
)
}
const Navbar = () => {
return (
{({isAuthenticated, toggleAuth}) => (
<>
{isAuthenticated ? Logout : Login}
>
)}
)
}
const User = () => {
return (
{value => (
{value.isAuthenticated ? : Please login.
}
)}
)
}
const AuthContext = createContext();
/**
* Main conponent
*/
class ContextAPI extends Component {
state = {
user: {
name: 'Mbr sagor',
email: '[email protected]',
profession: 'software engineer'
},
isAuthenticated: true
}
toggleAuthenticated = () => {
this.setState(prev => ({isAuthenticated: !prev.isAuthenticated}));
}
render() {
return (
Context API
)
}
}
export default ContextAPI
```