Components : The Components folder contains all the small individual Components which come together to form the website. Common : The Common folder contains all the components which were used more than once on several pages. Hooks : The Hooks folder contains function which perform certains task and then cause a re render of the website to occur.
The main point of react comes down to two point
React has small components which can be defined in seperate files and then used as tag in the main page
The example below is a small footer containing two link
const Footer = () => (
<Wrapper>
<Content>
<Link to='/AboutUs' style={{ textDecoration: 'none' }}>
<p>About Us</p>
</Link>
<Link to='/ContactUs' style={{ textDecoration: 'none' }}>
<p>Contact Us</p>
</Link>
</Content>
</Wrapper>
);
export default Footer;
The pages on website never changes . The only change happens when the re-render of website is causes by hooks
The below hook is used to fetch the next page of movies from the API and then it appends it to the end of existing movies in the array. After it has fetched the movies it uses the useEffect to trigger a re render of the page.
export const useHomeFetch = () => {
const [searchTerm, setSearchTerm] = useState('');
const [state, setState] = useState(initialState);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [isLoadingMore, setIsLoadingMore] = useState(false);
const fetchMovies = async (page, searchTerm = "") => {
try {
setError(false);
setLoading(true);
const movies = await API.fetchMovies(searchTerm, page);
setState(prev => ({
...movies,
results:
// Appending the new moveis from page after 1 to the end of the array
page > 1 ? [...prev.results, ...movies.results] : [...movies.results]
}))
} catch (error) {
setError(true);
}
setLoading(false);
};
// Fetching the movies from the datbase
useEffect(() => {
if(!searchTerm){
const sessionState = isPersistedState('homeState');
if(sessionState){
setState(sessionState);
return;
}
}
setState(initialState);
fetchMovies(1, searchTerm);
}, [searchTerm]);
- GET
:3001/register?username=${username}&email=${email}&password=${password}
register a new user
- GET
:3001/login?email=${email}&password=${password}
verifies login details
- GET
:3001/view_count?email=${email}
pulls total movies page visit count of user with given email id
- POST
:3001/view_count?email=${email}
increments view count of a user with given email by 1