reactgraphqlacademy / fb-messenger Goto Github PK

View Code? Open in Web Editor NEW

71.0 10.0 50.0 8.21 MB

Implement React concepts incrementally to a messenger app, training from https://reactjs.academy

javascript bootcamp workshop workshop-materials react reactjs redux graphql react-router-v4 styled-components

fb-messenger's Introduction

LeanJS

This project is a monorepo that contains the following LeanJS projects:

Lean UI -> yarn start leanui-docz
leanjs.com -> yarn start leanjs.com
reactgraphql.academy -> yarn start reactgraphql.academy
rga.sanity.studio (WIP) -> yarn start rga.studio

This project was generated using .

Adding capabilities to your workspace

Nx supports many plugins which add capabilities for developing different types of applications and different tools.

These capabilities include generating applications, libraries, etc as well as the devtools to test, and build projects as well.

Below are our core plugins:

React
- npm install --save-dev @nrwl/react
Web (no framework frontends)
- npm install --save-dev @nrwl/web
Angular
- npm install --save-dev @nrwl/angular
Nest
- npm install --save-dev @nrwl/nest
Express
- npm install --save-dev @nrwl/express
Node
- npm install --save-dev @nrwl/node

There are also many community plugins you could add.

Generate an application

Run nx g @nrwl/react:app my-app to generate an application.

You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

Generate a library

Run nx g @nrwl/react:lib my-lib to generate a library.

You can also use any of the plugins above to generate libraries as well.

Libraries are sharable across libraries and applications. They can be imported from @leanjs/mylib.

Development server

Run nx serve my-app for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run nx g @nrwl/react:component my-component --project=my-app to generate a new component.

Build

Run nx build my-app to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run nx test my-app to execute the unit tests via Jest.

Run nx affected:test to execute the unit tests affected by a change.

Running end-to-end tests

Run ng e2e my-app to execute the end-to-end tests via Cypress.

Run nx affected:e2e to execute the end-to-end tests affected by a change.

Understand your workspace

Run nx dep-graph to see a diagram of the dependencies of your projects.

Further help

Visit the Nx Documentation to learn more.

☁ Nx Cloud

Computation Memoization in the Cloud

Nx Cloud pairs with Nx in order to enable you to build and test code more rapidly, by up to 10 times. Even teams that are new to Nx can connect to Nx Cloud and start saving time instantly.

Teams using Nx gain the advantage of building full-stack applications with their preferred framework alongside Nx’s advanced code generation and project dependency graph, plus a unified experience for both frontend and backend developers.

Visit Nx Cloud to learn more.

fb-messenger's People

Contributors

Stargazers

Watchers

Forkers

apkouk brian-cooney artitudinale1 inkala horacioh grady-lad foxreymann ureesoriano edwardandress davidlampon jaap ollie28 codehopper-uk karina-celis joaopedrovc m7medmail ivorking m-fasciano mortenhofft marcoslarsen flexbox jsms90 troyciesco clearandfizzy andie5 hirendass marthehe wvoelcker charliewilson nestortejero felixng usmanafzal pastor-methods crismoreno mtuckerb kingasieminiak inesscatana forethoughtde mabe1983 galbam kerryboyko abhisekhsharma jamesthomasedwards rnaidenov davidmansy nviano sanderyt denniszelada ccalvarez

fb-messenger's Issues

thinking in react branch: loggedUser is defined but never used

loggedUser is defined as a variable on this line in App.js but this variable is not used anywhere

I'm guessing the intent was to use it on this line, where Alex is hardcoded?

Perhaps it's worth either removing the line that creates the loggedUser variable, or using it in the link:

<a
  onClick={this.toggleModal}
  className={`username ${this.userPosition || "left"}`}
>
  {loggedUser}
</a>

Just to save potential confusion during the refactor stages.

styling in react: styled-components is already in the package.json

In the latest commit, styled-components was added to the package.json along with the updated version of react.

This makes part 1 of the exercise unnecessary:

Part 1, install styled-components

styled-components is a npm package which we need to add to our project

 npm install --save styled-components

but it's nice to get everyone to explicitly install styled-components, so maybe it could be removed from the package.json again?

react router: UserDetails modal is already functioning, so this bonus task is already completed

The path /messages/:username/detail should display the UserDetail of a Conversation. The path /messages/:username should not display the UserDetail of a Conversation. You can navigate to /messages/:username/detail by clicking on the Link component in src/components/Messenger/Conversation/ConversationBar

This feature is already working in the current codebase, so most people just moved on to the next bonus question

In order to make the bonus question something that student's can complete & learn from, we would need to remove this functionality from the initial codebase.

redux: bonus exercise

The exercise requires you to install redux/react-redux in the styling-in-react branch. The versions of react/react-dom in that branch aren't compatible with the latest versions of redux/react-redux and cause confusing errors

styling in react: installation issues

After uncommenting the code for part 3, running npm start throws errors:

When you npm install you can see this peer dependency error:

npm WARN [email protected] requires a peer of react-dom@>= 16.3.0 but none is installed. You must install peer dependencies yourself

Updating this in package.json works 👍

Update the custom simplified version of redux to use the new context API

if you go to the redux branch, there's an exercise that you need to implement your own version of redux. this version of redux is using the old context API, so the goal is to refactor the code and Implement the new version of the context API.

Files that you need to modify:

/src/react-redux/connect.js
/src/react-redux/Provider.js

you can follow the Official documentation here: https://reactjs.org/docs/context.html

Tasks

refactor code in redux branch
refactor code in redux-leanjs-part1 branch
refactor code in redux-leanjs-part2 branch

any questions please let us know! :)