This project is a simple Tic Tac Toe game that was inspired (not copied) by the official React tutorial, Intro to React.
A live version of the app can be accessed here.
Initially, it was created to learn the basic React concepts, but it turned out to be a great opportunity to learn and explore some new concepts and best practices used to develop modern front-end web applications.
Below, a summary of the technologies, libraries, tools, concepts and best practices that were used to build the project.
The goal was to learn and get comfortable with the basic React concepts, such as class components, functional components, state, props, JSX, PropTypes, and everything mentioned on the Quick Start session of React docs. It means that advanced scenarios, such as routing or using a state management library like Redux, were not covered in this project.
The project was bootstrapped with Create React App, an awesome project that hides a lot of configuration complexities, allowing us to kick off a React project very quickly.
Create React App uses Babel under the hood, which allows us to use ES6 features out of the box. Features like classes, arrow functions, spread operator, const and let were used everywhere in the project. A complete list of the ES6 features can be found here.
The CSS preprocessor SASS (with SCSS syntax) was used to style the application. It seems to be the preferred CSS preprocessor nowadays. The SCSS files were organized following the 7-1 architecture pattern and some tips of the Sass Guidelines were adopted as well.
To better structure the CSS classes, some naming conventions were tested like BEM and OOCSS. However, after some experiments, the SUIT name convention was chosen because it plays well with React components. But maybe it's just a personal preference.
To ensure cross-browser consistency, Normalize.css was used as well.
The project comes with two themes, Dark and Light. The dynamic theming mechanism was created using the power of CSS custom properties. There is a nice article about that here.
Unit tests were written using Jest, which is integrated by default when using Create React App. The Enzyme test utility was used to test React components.
The project is using ESLint, one of the most popular JavaScript linters, together with the rules provided by the Airbnb JavaScript Style Guide, with just some few customizations.
The Stylelint linter, in conjunction with the SASS guidelines, is also used to format and verify the project's SCSS code.
Yarn was chosen as the project package manager instead of npm. Although most of the problems with npm were solved, it seems like Yarn still have some advantages over npm.
The project was built using Visual Studio Code. Although it's not part of the project itself, it's worth mentioning it because it's a really great code editor, highly configurable and with great extensions that can help to increase productivity. These are some really useful extensions used during the project:
- Debbuger for Chrome - Allows run your app on Chrome and debug it inside Visual Studio Code.
- ESLint - Shows ESlint errors and warnings inside the editor.
- stylelint - Shows Stylelint errors and warnings inside the editor.
- Prettier - Formats JavaScript and CSS code using ESLint and Stylelint rules.
- GitLens - Augments the Git integration with VS Code.
This project is MIT licensed.