Wordle Clone - React Workshop

This repository contains a clone of the Wordle game, made in React.
There is a design-only branch that holds the code of the app without any logic, perfect for skipping tedious bootstraping.

Attending the Workshop

If you're going to attend the workshop on March 29th, please make sure to follow the steps below.

Setup Requirements

• A Linux/MacOS environment (a Windows environment might also work, but it may cause issues)
• NodeJS (any recent version will do, I'll be using v16)
• Yarn (optional)
• Git (optional)
• An editor of your choice (I'll be using VSCode)

A tutorial on how to setup all of this can be found on resumos-leic's wiki.

After your environment is setup, you should download the source code of this repository from the design-only branch, since this is what we'll be using in the workshop.

If you have Git installed, simply type this in the terminal:

git clone -b design-only https://github.com/HackerSchool/react-workshop.git

Alternatively, download the zip from GitHub.

If you are comfortable using the command line, you can go ahead, install dependencies and try out the code you've just downloaded. Otherwise, we'll do this in the workshop.

cd react-workshop # go inside the website folder
yarn # install dependencies
yarn start # start development server (by default, on localhost:3000)

Knowledge Requirements

Although not strictly necessary, you are expected to know the following when coming to the workshop:

• Basic HTML/CSS: how websites are structured, how to style DOM Nodes, CSS classes, etc
• A programming language (preferably JavaScript, but any programming language will do)
  • A great resource for learning more about JavaScript is javascript.info
  • We'll be using arrow functions, const and let, logical operators (&& and ||), objects (just a little bit), arrays, various array methods (.slice, .map, .reduce), spread operator and DOM events (more specifically, the keydown event). Don't worry if you don't know all of this! It'll be explained in the workshop.
• Very basic shell knowledge (change your current directory, run commands, etc). If you have never used a shell before, we'll help you out during the workshop.

Resources

Below are various resources if you want to learn more about React. Other resources about the internet, HTML/CSS and Git are also listed.

• React Developer Roadmap
• React Documentation (Getting Started)
• freeCodeCamp React course
• useHooks (various pre-made React hooks)

Useful React Libraries/Frameworks

• reach-router (Routing)
• react-helmet (Document Head Manager)
• Next.js (Server Side Rendering/Static Site Generator)
• Gatsby (Static Site Generator)
• Axios (HTTP REST client)
• Apollo (GraphQL client)
• Material UI (Design Library)
• Styled Components (CSS in JS)

Internet

• "How the Internet Works" playlist by Code.org
• "What is DNS?" by Cloudflare

HTML/CSS/JS

• "Responsive Web Design" course on freeCodeCamp
• "A Complete Guide to Flexbox" on CSS-Tricks
• "A Complete Guide to Grid" on CSS-Tricks
• "CSS Diner" - Learn CSS Selectors
• "The Modern JavaScript Tutorial"

Version Control Systems (VCS)

• "Version Control (Git)" by MIT Missing Semester (the whole Missing Semester series is also great)

Where next?

After attending the workshop, you have a lot of things you could do. I'm gonna go ahead and recommend you to create another game on your own.

Here are some ideas:

• Tic Tac Toe
  • The official React tutorial uses this as an example and is an excellent learning challenge. Keep in mind that it uses class components instead of the subjetively better functional components.
• Four in a row
• Mastermind
• Battleship
  • I've made this a while ago (but it has online multiplayer so it's a bit more advanced)
• ...and much more

Alternatively, feel free to build anything you want. After all, you get to decide!