reactgraphqlacademy / fb-messenger

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

ReactJS Facebook messenger

The goal of these exercises is to understand the core principles and libraries of the React ecosystem.

Requirements

• Be comfortable writing JavaScript (ES6: Module system, class syntax, destructuring assignment).
• Have nodeand npm installed in your computer.

Getting started

Clone the repo on your machine

git clone https://github.com/reactgraphqlacademy/fb-messenger.git

Then cd into ./fb-messenger

cd fb-messenger

Download all the exercices

You will need to head to the correct branch for the exercise.

How? run:

git pull --all
git branch --all
git checkout <branch_name>

License

This material is available for private, non-commercial use under the GPL version 3.

fb-messenger's Issues

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?

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: 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! :)

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