Open taki-tiler[bot] opened 2 months ago
Finish
Follow a tutorial project to create a minimal "Hello World" application using the technology stack you were assigned. If you don't know on which tech stack you are, please ask your tutor before continuing. We use react for web projects and react-native for mobile apps, both using Typescript. Below there are instructions for creating an simple Hello World in the tech stack you were assigned. So pick up yours and read it carefully:
For both react and react-native, there are two options that you can use: with or without a framework. The initial documentation from react-native explores a little the differences of using and not using a framework. For you, using it or don't depends on the project you're working after the onboard. So, in case you don't know if you should use a framwork or not, ask your tutors.
Note: For now on, some steps will have an estimated time to help you organizing your time better. If you do not finish the step in the estimated time don't worry! It's just an average time based on previous onboards. The main purpose of this estimated time is to indicate when you should ask for help in case you're stuck. This is called timebox
By the way, remember that if you're struggling with any topic, feel free asking any Taqtiler ;)
Finish
So, now that you have properly setup and run your project, let's talk about some nice tools that we use to format our code and also some conventions we have. These are very important subjects when we work as a team, making our work of reading and contributing on projects much easier.
For this task, you are supposed to apply the following conventions on the basic app that you've created on the last step (rename some files and make sure that most of the files are following prettier and lint rules).
Lint is a very powerful tool to inspect code and warn about some possible mistakes. Lints use to be more language-specific. In our projects, we use eslint. Eslint is a Javascript linter, but sure we have some additional support for Typescript feature too. You can follow this guide to configure eslint with Typescript.
We recommend you install eslint VSCode extension, so the lint errors will be shown in real-time for you.
Prettier is a tool that helps us formatting our code. It has a lot more options than editorconfig and language-specific formatting rules. They have a VSCode extension as well that makes possible to auto-format a file according to these rules. We highly recommend you install it, if it's not already installed in your pc.
We generally use prettier in our projects as a plugin for eslint, so code styling becomes something like lint rules. To add prettier in your project as a eslint plugin, please follow this guide.
This is the .prettierrc.js we use on our projects, in case you want to copy.
Conventions are very important to maintain all projects code more readable for all developers and make the process of switching between projects less painful. We're going to list some of them here, but you will be learning and practicing them on code-reviews:
kebab-case
: lowercase characters and words combined with a dash (-)camelCase
: first char lowercase and words combined by the first letter at uppercasePascalCase
: similar to camelCase
, but first char is uppercaseif
without brackets, even if it's a one command only condition. This can avoid some readability problemsAdd these tools on your project, check the code you have untill now to follow our conventions. Also, make sure that if you change something on code that generates a format or lint error, it's detected in real-time on the editor. Then, open a Pull Request.
Finish
feature/setup
branchIf you don't remember how to open a Pull Request, check out the references in the previous issues. Your PR should have develop
branch as base, to be merged into later.
This pull request will be reviewed by your Taqtile tutor and possibly by some other people. This process is called Code Review (CR). You can ask your tutor who will be revising your code.
Mark them on every Pull Request as reviewers. Check here an example of Code Review. You'll possibly have some changes requested/suggested in order to merge your new branch on develop
. Make sure to resolve all those changes before merging your branch into develop. 😉
Finish
Do you remember we created the README.md
of this project before? Now that you have a project created on your technology stack, it's time to update it with some piece of information.
Since the feature/setup
is (probably) still being reviewed, we need to create a new branch for this current step's task. Let's call this new branch docs/update-readme
. Here's what you'll need to do:
git checkout develop
docs/update-readme
Environment and tools
section with some data about... well... your machine environment and the tools you're using. Things like the Node version, the Android Studio/Xcode version, the programming language any other relevant data for a developer to getting started in your project.Steps to run and debug
section is usually filled with information about how to run your project, such as what commands should the developer use or which configurations should he/she turn on/off before executing your project.After that, open a pull request with these README.md
changes.
TIP: an excellent README is that one document that is sufficient for any developer to be able to run and contribute to your project.
Finish
Here in Taqtile, before merging our revised (and approved) branches, we rebase this branch into the one we are attempting to merge. In this case, you'll rebase docs/update-readme
or feature/setup
to develop
, depending on which one was reviewed and approved first.
Too confusing? Here are some good links you can read about rebase:
Note: Remember that if you are stuck in any of these topics, feel free to ask any Taqtiler. We are here to help 😉
The ideal setup we are trying to achieve with the rebases are something like this:
Finish
Click here for your next track
Step 1/6 - Create a git branch
feature/setup
If you don't remember how to create a branch, check the references in the previous issues.
Note: From here, the issues will contain fewer tutorials and step-by-step guides. However, it doesn't mean you won't be able to ask. You can always ask anything to any Taqtiler. We are here to help 😉
Note 2: Be patient, this is the last setup before coding. 👍