React | Talking about yarn and more...

Hello developers! Today I would like to talk about how to run your first react application and give you a few pieces of advice on how to start the creative process with a tool that would help you organize your ideas. But first, we need to talk about:

yarn start

In my last blog, we learn about NPM and how we need it to use create-react-app but another option is using yarn start create-react-app. I'm not going to start with all the technicalities and differences between npm and yarn. Let's say that both get the job done. If by any chance you have problems using the npm package manager try using yarn instead. YARN is available as an NPM package. At this point NPM should be already installed in your system so, you can install it by running the following command:

npm install yarn

...and that's it! I can't say one is better than the other. NPM usually is the default choice for many developers because like we discuss before installing Node.js would automatically install NPM on your system. YARN was born with the idea of fixing issues presented in NPM in the past, but doing some research online I learn the NPM and YARN are actually pretty tight in that race. If you want to learn more about the differences between YARN and NPM I strongly recommend this great article writing by Guy Bar-Gil.

Now, let's go back to...

Now that everything is amazing, properly installed and your new React app is created it's time to run your application.

First, be sure you're in the correct directory. If you're using VS Code your terminal would be open by default in the right one. In your terminal, run the following command:

npm start

After that, your new React app would open in your default browser (if your default browser is not Chrome stop reading this and change it NOW. Thank you!) Your screen should look something like this:

Congratulations! Your new React App is installed and running, but now what? If you're anything like me you would need a place where you can organize all your extraordinary ideas for this application. For me, that place is Trello.com Trello is a collaboration tool that organizes your projects into boards. In one glance, Trello tells you what's being worked on, who's working on what, and where something is in a process.

Imagine a giant whiteboard filled with lists of sticky notes! Let's be honest, you're a web developer. You own a whiteboard and hundred of sticky notes! For example, React have something called containers (we would talk about that pretty soon!), and those containers are full of actions. Trello really helps me organize my ideas by container. Thanks to that I can work more effectively on my application and the best part, it's FREE.

If you need more help using Trello.com this blog post is a most.

And that's it for today! See you next week where we will be talking more about the parts of our React App.

Adios!