Instagram replica with React, React Native, Express, GraphQL and Prisma
Front End for Instagram clone (GraphQL + Hooks)
- Home
- explore
- Activity
- Search
- Profile
- Edit Profile
- Login
- LogOut
- Photo Like
- Photo Comments
- Photo Details
- Photo - Multiple
Styled Components
ThemeProvider: A helper component for theming. Injects the theme into all styled components anywhere beneath it in the component tree. https://www.styled-components.com/docs/api#themeprovidertheme: An object that will be injected asthemeinto all interpolations in styled components beneath the provider- createGlobalStyle: A helper function to generate a special
StyledComponentthat handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case ofcreateGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied. https://www.styled-components.com/docs/api#createglobalstyle
React-router-dom
- https://reacttraining.com/react-router/web/guides/basic-components
<Route>: Route matching is done by comparing a<Route>'s path prop to the current location’s pathname. When a<Route>matches it will render its content and when it does not match, it will render null. A<Route>with no path will always match.<Switch>: The<Switch>component is used to group<Route>s together. The<Switch>is not required for grouping<Route>s, but it can be quite useful.- Route Component: https://reacttraining.com/react-router/web/api/Route
- component: A React component to render only when the location matches. It will be rendered with route props. https://reacttraining.com/react-router/web/api/Route/component
- exact(bool): When true, will only match if the path matches the location.pathname exactly. https://reacttraining.com/react-router/web/api/Route/exact-bool
- https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter
HashRouter: It uses URL hash, it puts no limitations on supported browsers or web server. Server-side routing is independent from client-side routing. https://reacttraining.com/react-router/web/api/HashRouterBrowserRouter: It uses history API, i.e. it's unavailable for legacy browsers (IE 9 and lower and contemporaries). Client-side React application is able to maintain clean routes like example.com/react/route but needs to be backed by web server. https://reacttraining.com/react-router/web/api/BrowserRouter
Apollo Boost
-
https://github.com/apollographql/apollo-client/tree/master/packages/apollo-boost
-
ApolloClient is connected to your app
React Fragments
https://reactjs.org/docs/fragments.html
Fragments: A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
React Hooks
https://reactjs.org/docs/hooks-overview.html
-
useStateis a Hook (we’ll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. -
useStatereturns a pair: the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else. -
Array Destructuring: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring
React Router - withRouter
https://reacttraining.com/react-router/core/api/withRouter
You can get access to the history object’s properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.