Forem: anette87

React | The ABC of Lifecycle Methods

anette87 — Thu, 28 Jan 2021 23:39:56 +0000

Hi Developers! In a couple of blogs ago we talked about the two ways to create a component. These are: functional components and class components. When we create a class component, we have the advantage that by extending it from React.Component it will provide us with more methods and properties, which will exponentially improve the component. Part of that methods is what we know as Lifecycle methods. Components in React goes through a lifecycle of events. An easy way to understand this is by thinking about the lifecycle of a plant.

You sow the plant.
The plant grows and changes with time.
The plant dies.

To understand this better is necessary to know that React.Component has three life cycles:

a. Mounting: when a component is instantiated and inserted into the DOM
b. Updating: when the properties (props) or the state (state) of the component undergo any change.
c. Unmounting: when the component is removed from the DOM.

Each life cycle will provide us with different life cycle methods for the component, depending on which phase it is in, we will be able to use:

a. Mounting -> render() -> componentDidMount()

It is invoked immediately after the component is mounted.
This loads data from an API.
componentDidMount() allows the use of setState(). Calling the setState() here will update state and cause another rendering but it will happen before the browser updates the UI. This is to ensure that the user will not see any UI updates with the double rendering.

b. Updating -> render() -> componentDidUpdate()

Invoked immediately after the update occurs.
This method is NOT called in the initial rendering.
It is useful for making API requests, as long as the properties (this.props) are compared with the prevProps argument, so that if there are no changes, it does not affect.
We can modify the state (setState), but, like the previous point, the current this.state must be compared with the previous prevState, since otherwise you can generate an infinite loop.

c. Unmounting --> componentWillUnmount()

Invoked immediately before disassembling and destroying the component.
It is useful for "cleaning tasks" suchs a timers, network requests, subscriptions, etc.
This component will never be re-rendered and because of that we cannot call setState() during this lifecycle method.

This diagram below is from the official React documentation. Here you can see the different React lifecycle methods and when they are invoked.

Lifecycles are not the easiest part to explain in React and it's much more than this blog. I hope at least this little preview helped you understand the basics so you can go deeper into these methods. To be honest, it took me a lot of reading and playing with my code and the console to understand how they work, but once you got it, you got it. To learn more about lifecycles I recommend this documantation from w3schools. The way they explain lifecycles is really simple and easy to follow, so go and check their website now. You can thank me later.

Thank you for reading! :)

React | State

anette87 — Fri, 22 Jan 2021 01:23:05 +0000

Hi Developers! In my last blog, we talked about how to pass data between React Containers using Props. This is really helpful, but the only downside is that Props are read-only meaning that we can't change their original value. For that, we need something called State.

It is absolutely impossible to talk about React basics and not talk about States. I think you'll agree when I say that React props are a very important and interesting feature of the framework but very quickly you realize that you need something more. Especially because without states, your React components are simple templates.

But, what's a state? A state in React is a mutable data store of components that are also autonomous meaning that the state belongs to an autonomous class that anyone can import and use in their application. Props and states are both attributes of a class, so you can use this.state and / or this.pros, but they have different purposes: while properties are immutable, the values of the states can change. They are mutable. The values of the props are passed from parents to children and the values of the states are defined in the component, they do not start in the parent component, and you cannot call setState () in the render ().

A good example of how to use State could be a countdown. In a countdown, you would need the numbers to change every second. For that, you could not use a property because the value needs to change every second. You could also use the states in other situations where you need to make a request to the server to fetch the information you want to see on the screen, but you don't want other parts of your UI to update.

Using states, React intelligently updates the view for you, where it needs to be updated.

Now let's see State in action in our code:

I divided this code into three parts to have a better understanding of the steps you need to follow as you set your state.

1) We need to set our state in our class. Remember, to use state you would need to always use a class because setState is inherited from the base Component class. To set state you just need to call state and inside the curly braces create your object adding key:value pairs. The initial value can be pretty much anything: a string, number, array, etc.

 state = {

name: "Anette"

}

2) In this example I created a function to call our setState. In this case, the state will be changed when the user clicks on our p tag. Updating states is as simple as declaring this.setState (data, callback). You just have to remember that React merges the data with the existing states and then calls render ().

setState() updates only the state you want. It doesn't always update the whole object. For example, if in an object you have different states, like the first name, last name, age and you only want to update the age, all you have to do is this.setState ({name: "Steven});. The other values will remain the same.

Also, keep in mind that setState () works asynchronously. State is not immediately available after calling setState (), that's why it's important to have the callback in setState (). It is a way of ensuring that the new state is available. FYI, changing the state without using setState () is considered anti-pattern so please, don't even think about that.

3) The way to access your state inside your code is using this.state.name . In this case, we assign our data using JSX syntax and that's why we using curly braces.

States allow your applications to be interactive and have dynamic information. At the same time, they are useful when you need to see the changes in the server's response to a request. I imagine that now you can see how helpful and necessary is states in our apps, right? React is pretty great!

Thank you for reading! :)

React | Props

anette87 — Thu, 14 Jan 2021 08:09:56 +0000

Hello developers! In my last blog, we talked about components and what Stateful, Stateless, and Presentational Components mean in the world of React. That's fantastic! At this point, you're feeling confident creating components and that would allow you to bring to life a flexible and organized application.

If you're learning React I can assume you are familiar with JavaScript. If you're familiar with JavaScript you know what Objects Properties are. So at this point, you know something is missing and you're thinking: "Well, components are great and everything, but how can I pass my data from component to component?" You probably already guessed the answer. Yes, we use props.

Something really functional and practical about components is that they're reusable. As a developer, we don't like repeating code. Using components is the best way in react to avoid that. Let's take a look at this example:

The first thing you have to know about passing components is that they need to be imported and exported. Our component can be exported thanks to the following line of code:

export default ComponentEx;

Ok, now let's see what's going on here. Let's start with line 2:

import ComponentEx from "./ComponentEx;"

This code is quite self-explanatory. In this case, we're importing the ComponentEx from the file "./ComponentEx. Something worth knowing is that ComponentEx is just a placeholder for the file. You could name this LalaLand and would work the same. For code etiquette (and logic) we use the component name to represent the component we're importing.

Now, let's take a look at line 13:

 < ComponentEx name={"Ethan"} age={"8"} user={user} / >

We want to pass data from one component to another because we don’t want to have a component rendering static data. The goal is to pass dynamic data to your component instead. That’s where React’s props come into play. The way we pass data in React is by defining custom HTML attributes. In our example, we have three props been pass to our component:

name={"Ethan"}
age={"8"}
user={user}

We'll assign our data using JSX syntax. Don’t forget the curly braces! As you can see your data can be pass in different forms. In this case, I'm passing a string, a number, and an object. Pretty great, right?

Let's take a look at our ComponentEx component:

As we can see, we pass props as an argument in our functional component. Once you have your "props" you're ready to use the data. In this case, I'm outputting the data on a p tag. The way we access the data using props is the following:

 {props.name}

Again, we're using JSX so don’t forget the curly braces!

...and that's it! Now, you're ready to pass data between components!

I would like to discuss three important things before finishing this blog:

1. Props are inherited from the parent components to the child component. Keep this in mind when creating the logistics or your application.
2. When using a class just add this before props. For example:

 {this.props.name}

Remember, when we use a class we're extending React.Component which include the props properties. I know, Magic!

3. Props are read-only. Passing props from component to component doesn’t make the component interactive. To do so, we need to use something call state.

Now, that's it! For real this time. In the next blog, we will learn more about our new friend state.

Thank you for reading! 😊

React | Components: Stateful, Stateless & Presentational.

anette87 — Thu, 07 Jan 2021 23:30:47 +0000

Hello developers! In my last blog, we learn more about the Structure of our React App. Today, I want to talk more in-depth about a very important part of this structure, our components .

To be honest, the concept of a component is something quite simple to understand. Think about your components as a visual software element that has its own state, receives some properties, and implements its own rendering logic. Easy, right? Now you're probably thinking that all components are the same and guess what? You're wrong! 🤣

But don't you worry! This blog's purpose is to be a tour of some of the types of components that we can use in React. Specifically, the three types of components you would use and see more frequently.

1. Stateful Component

Without a doubt, these types of components are the most used. The three main characteristics of a Stateful Component are:

use encapsulation in classes
have a state that they define
update and each change in both props and state calls the render method.

Example of a Stateful Component:

A stateful component is dependent on its state object and can change its own state. The component re-renders based on changes to its state, and may pass down properties of it's state to child components as properties on props. We will talk more about props in my next blog.

2. Stateless Component

These types of components are defined as functions in Vanilla JavaScrip and don't have or work with state. The only data that this type of component works with is with the received props, also it does not allow working with overwriting the methods of its life cycle. The advantages of this type of component is that they are simple to write, easily testable and improve performance.

Example of a Stateless Component:

An easy way to remember when the component is Stateful or Stateless at the beginning of your React journey is this:

Stateful = class
Stateless = function

Note: In theory, you can use either a function or a class for creating stateless components. But unless you need to use lifecycles in your components, you should go for stateless functional components. In addition, Hooks are introducing in React 16.8. They let you use state and other React features without writing a class, but that's another story. Let's keep things simple for now.

3.Presentational Components

This last component is known as a structural component, meaning that these types of components do not technically correspond to any API element, class, or function in React, they are just purely conceptual.

These types of components should only focus and focus their efforts on how the UI should be rendered. They can be made up of other visual elements and often include styles and classes. All the data involved in its rendering must be received through props, so it must be independent of calls to external services. These types of components are usually of the Stateless type since they do not need state, and must manage the actions by passing them to parent components through their props. Our Stateless component example above is a great representation of a Presentational Component.

These are the most used components in any React-based application. I encourage you to start using it in your developments and once you get familiar with these three do a little more research and start experimenting with other types of components.

As always, thank you for reading!

React | Application Structure Part II

anette87 — Wed, 30 Dec 2020 19:45:04 +0000

Hello developers! In my last blog, we learn more about two fundamental parts of your React App:

1.node_modules
2.public

Today we will discuss one of the most important folders inside your application: src . Short for "source", src contains your working files that will be used later to create the build.

Let's stop for a minute and talk a little bit about build. Build is where a compiled version of assets is placed when you run npm build. This is what will get delivered to the user. Something important to remember is that build is not part of the default create-react-app structure.

Now, going back to src, this folder would look something like this:

App.css: This file determines the styling of your application. App.css is a global styling file. create-react-app uses webpack for handling all assets. Webpack offers a custom way of extending the concept of import beyond JavaScript. If a JavaScript file depends on a CSS file and you need to import the CSS from the JavaScript like this:

That's the reason why this CSS file is global. This file is exported to your full app when added to the App.js.

As well, index.css takes you to at even deeper level. By default this file contains basic fonts and margins from your application. You can think about this file like the bond of your app and just that.

For a React app, the best practice is to put every component in its own directory containing its corresponding JS and CSS files. The App component is the topmost component in a React app but there aren't any predefined rules for using App.css or index.css for global CSS but me recommendation is to use your App.css as your global CSS file because that's what you would see the most.

Like we're already talking about index.css let's talk about index.js:

Do you remember the super important line of code in our HTML file id-"root" in my last blog? Well, this file access to that root element in our DOM!

As you can notice above it renders our React application with the render method. Another significant part about this file is a reference to the App object imported from the App file.

import App from './App';

Now, let's talk about our last file: App.js .

App.js (second picture in this blog) is the only React component we have in the starting application.
React lets you define components in two forms: classes or functions. In my next blog we'll talk more about components but what you need to understand is that in your component is where you start building your application for real. Everything you'll see in localhost:3000 lives inside your App.js.

These are the fundamentals of your first React App using create-react-app . All the other files are more familiar like images and test files for your application. Once this structure is clear to you, building components will be really easy. Trust me, you'll love how clean your code will look using the components folder but I'll talk about that next week.

Thanks for reading and have a Happy New Year!

React | Application Structure Part I

anette87 — Mon, 21 Dec 2020 22:39:22 +0000

Hello developers! In my last blog, we learn how to run your new React App and how to organize your ideas. We used create-react-app to create our application and all the structure was already done for us. That's amazing and really helpful, but we need to understand the purpose of these files. Today we will discuss two of these folders:

1.node_modules
2.public

After your app is created the structure should look something like this:

Folder #1: node_modules This folder is where packages installed by NPM or Yarn will live. In other words, they are just dependencies and sub-dependencies that you have added to your project.

Folder #2: public is where your static files live. Your public folder is the root folder that gets distributed by the web server in the end. If you're not sure if a file belongs in this folder think about if the file is not imported by your JavaScript application and must maintain its file name. If the answer is yes, then your file belongs to the public folder. Files in the public directory will always keep the same file name in production. In this folder, we have one of the most important files in your application. This file is:

index.html. This file is the ONLY html page in your project. Your index.html file should look something like this:

As we know JavaScrip allows us to create single-page applications. The index.html file is your single-page. We won't add ANY HTML code here. We would do that later in different files. But how that would work you ask yourself! Can you spot this tiny line of code in the file?

id="root"

This line is super important because there is where you will place your React application. I would show you that later, don't you worry! One last thing. You can modify this file by importing libraries such as Bootstrap but that's the only thing you should modify.

Another file on this directory worth mentioning is:

manifest.json.This is a JSON file that tells the browser about your Progressive Web Application and how it should behave when installed on a desktop or mobile device.

A typical manifest file includes the app name, icons, and the URL that should be opened when the app is launched. Manifest files are supported in Chrome, Edge, Firefox, UC Browser, Opera, and the Samsung browser. Safari has partial support.

One more thing you could find in this folder is the pictures for your application. Like your create-react-app application is so small the files are just added to this folder because they are minimal. For example, it should look like this:

As your app continues to grow, you will need a little more organization for your icons or images. A good idea is to create sub-folders by container, in that case, you would know exactly where that image belongs in your application. The structure should look:


|-public
  |-images
    |-App 
      |-image1.png

...and that's it for today! In Part II of this series React | Application Structure we would be discussing the src folder and a couple of another important files inside your React Application. Thank you for reading and until next week!

Merry Christmas! 🎄

React | Talking about yarn and more...

anette87 — Thu, 17 Dec 2020 00:44:41 +0000

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!

React | create-react-app

anette87 — Fri, 11 Dec 2020 00:04:41 +0000

Hello developers! It's has been two months since a graduated from Flatiron School. Since then I had been working on a little project using the React framework.

I would be honest with you guys. After the program was over and I had my last review and final presentation my brain was so exhausted that I didn't touch my computer for two weeks. After that, I found myself super excited and full of new ideas I thought that this blog would be the perfect place to charge my new application journey. Let's learn more about React together!

Ok, let's said this is the first time you're creating a React application. One of the steps that many new developers struggle with is the installation process of React. What if I tell you that's a really easy way to start your React application from the scratch? Enters create-react-app

But first...

For create-react-app to work, you are going to need NPM on your system. NPM or Node Package Manager is the world's largest Software Registry and contains over 800,000 code packages. NPM is installed with Node.js which means that you have to install Node.js to get npm on your computer.

Node.js is an open-source server environment. With Node.js you can:

generate dynamic page content
create, open, read, write, delete, and close files on the server
collect form data
add, delete, modify data in your database

Go to the official Node.js website to download and install Node. Installing Node.js would automatically install NPM on your system. It's not that great?

IMPORTANT STEPS BEFORE AND AFTER DOWNLOADING Node.Js

Press the "Recommended For Most Users" option.
After installing Node, start your terminal and run:
```
node -v
```
```
npm -v
```
-v allows you to see what version is currently installed on your system of any program. The more you know!😉 This step is really important because your version of NPM should be at least 5.2.0.

3.If you have an older version of NPM, run this command to update it:

npm install -g npm

After this, now we're ready to install create-react-app. Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. You simply run one command and Create React App sets up the tools you need to start your React project. This just not saves you time but avoids mistakes in the setup process.

Ok! Now, how do you install create-react-app?
To install your app, first, go to the right directory where your app folder lives and run the following command:

npx create-react-app your-app-name

The installation process it's not short. It would take a couple of minutes. So go, grab a cup of coffee or watch a YouTube video until everything is set up for you. After that, I would suggest going to your folder and double-check that everything is there.

And that's it! Your new React Application is created and ready to rock. In the next blog, I would talk about how to run your application, and the first few steps you always need to follow at the beginning of creating a wonderful React app.

See you soon!

How To Improve Your Life In 5 Months.

anette87 — Sun, 04 Oct 2020 19:42:52 +0000

On May 4th, 2020 I started my first Coding Bootcamp with Flatiron School. I was excited, nervous, and anxious but so ready for this. Today I'm almost done with this amazing experience and I can't be more happy and grateful
of all the things I've learned in this process.

Every month we had to create an Application focusing on the subject that we had learned that month. The first one was a simple CLI Application. For that one, I created an English to Spanish Traveler translator. Our last project was React-Redux Application and for that, I created an Online Closet where you can organize your real-life closet, add pictures, and search between different categories.

React-Redux Project:

Working on my last project I couldn't stop going back to that first month and first project. Thinking of how I would make things so much different now that I have the knowledge. It's fascinating to see how classes evolve and how we will continue to use them in other languages, frameworks, and libraries from the beginning to the end. Classes at the end of the day are always a template for creating objects. They encapsulate data with code to work on that data.

CLI Project:

This happens pretty much in every single project. For example, for my Rails project, I created a Funko Pop Collection App. In this App, you can create your own Funko Pop Collection, add reviews to your favorites ones. I remember when I was working on the "Add Figure To Your Collection" button in my mind the idea of not re-render the page after that and just manipulate the DOM to change what the user sees makes sense but I had no idea how to do that because at this point I was working with Rails Views and all the MCV Architecture. My app worked just fine, but I always keep that idea on the back of my mind.

Rails Project:

The lessons after Rails was JavaScript and DOM manipulation. Thanks to this new JV World I learned about something called Single Page Application. That means this is an app or website that interacts with the web browser by dynamically rewriting the current web page with new data from the webserver, instead of the default method of the browser loading entire new pages. Funny enough that was the idea I had for my Funko Pop App, but apparently my mind was a little bit ahead.

Something that I learned is this past few months is that everything is possible and there's always a way to do things. After learning how to use React and Redux I know this is what I want to do every day. I love creating Apps. I enjoy the idea of thinking in ways to make those applications even better. I still have a lot to learn but if you think about it, it's really extraordinary how in coding in a way or another everything is the same but different. Five months ago I had no idea of what any of this was, but I took a leap of faith and now I can't stop learning. Every new thing makes me a better developer and I will always thank Flatiron School for helping me start this new chapter in my life.

Hi, my name is Anette Rivera and I'm a Full Stack Web Developer.

Thank you for reading! :)

Redux?! How does this work?!

anette87 — Mon, 28 Sep 2020 22:41:20 +0000

About two months ago I started my journey with JavaScript and React. I think every developer goes through the thought processes of, "Oh! React is a great framework! I can see how this can be helpful". Then comes Redux, a library that makes you doubt everything you think you have learned. Until one day you have an epiphany and EVERYTHING makes sense in your head and you finally understand that Redux makes things even easier at the end. That has been my process with React-Redux. A total roller coaster. But what is Redux?

Redux is just a JavaScript library. The most important thing to know is that Redux is pure JavaScript, so it is agnostic to the framework and can be used with any framework library such as React or Angular.

Redux is based on this main concepts:

A. A single "source of truth":
Redux uses a single Store to storage our state. The entire state is stored in a tree. If you think about it, in JavaScript this would be achieved using a JavaScript object. If you want, and it helps you understand it, you can think that this is what is happening behind the scenes.

B. The status is read-only:
We cannot modify the state directly, we can only read from it to represent it in the view and if we want to modify it, we have to do it through actions. But, what is an action? An action is simply a JavaScript object that includes at least one attribute ("type") that indicates the type of action we are issuing and in case there is data associated with the change or modification, an attribute ("payload") whit that data. Sounds complicated but it's not. I promise.

Example of an Action ⬇

C. Changes with pure functions:
Since we cannot modify the state directly (just through actions) and the state is stored in a single Store, to specify how to make changes in the state tree we use pure functions called reducers "(a pure function is simply a function that returns the same result to the same input data)". The reducer is just that, a function that receives two parameters, the initial state, and an action. Depending on the type of action it will perform one operation or another on the state. Always immutable, WE CANNOT MODIFY THE STATE, if not create a copy from the previous one. This makes it easier to track down possible errors.

Example of a Reducer ⬇

Redux is much more than this, but these are its basic principles. The sooner you understand how your actions and reducers work the closer you will be to being able to use such a powerful library as Redux. What Redux does in my own words is to create a maintainable application with a great architecture. You can choose to don't use it but the architecture of the application you are making will not be maintainable and if it grows it will be more difficult to make changes. That is why Redux dictates the guidelines for a good architecture, because it helps to do things right from the start.

Thank you for reading! 😃

JavaScript Object-Oriented

anette87 — Sun, 30 Aug 2020 18:11:56 +0000

Ok friends, let's start from the beginning right? What is object-oriented programming?

The idea behind Object-Oriented programming is that you create a blueprint for the look of your "object" and call it over and over again to do whatever you want with it. Sounds helpful right? Well, it is. Every time you want to use an object, you must first create it so that it exists, and then configure its properties to use the attached functionalities. These functionalities are known as 'methods'. For example, a User object may have a get user details (in the form of a method) functionality attached. As you can see in theory is a really clear idea.

When you start learning JavaScript the structure used to create "methods" are functions. In a function-based structure, most of the time, you will need to inject a dependency into the function for it to work. The problem with the above becomes that if you were to expand the number of functions, this can soon be quite tricky. Although initially, it seems much easier to write everything as functions and call it as needed. Actually, that was my game plan for me JS project. If you're new at JavaScript I would suggest starting written your code like this and ones you feel confident in your code to move to classes and JSOO. Just a suggestion!

But... why we need an Object-Oriented structure in JavaScript if a simple function would work just as fine? Well, when you think around classes rather than a series of interconnected functions, you are reducing the risk and scope of failure if it occurs. That's because every dependency injection creates a potential point of failure and as a programmer, we DON'T WANT OR NEED THAT!. Not only is it time-consuming to track functions, but it is even more time and mental cost if you have to do it a dozen times for exactly the same thing.

OOP in JavaScript can decrease the mental load and potential spaghetti relationships inherent in function-based programming. The more you learn and the more applications you build it's pretty easy to notice that JavaScript-based front-ends and back-ends apps grown in both size and complexity. When the structure of the code is easily understandable, it reduces the possibility of errors, making it easy to add new functions without breaking everything around it and that's the real beauty of JavaScript Object-Oriented Programming.

Thank you for reading! :)

Ruby on Rails & Routes

anette87 — Mon, 03 Aug 2020 02:20:39 +0000

As a developer one of the things I always look in my applications is simplicity. Simplicity in my code and a good user-friendly experience for my users. Our routes and the way we set them up would make a big difference in the overall performance of our app.

Rails is a really beautiful and magical thing, and that apply to our routes too.The Rails router recognizes the URLs and sends them to the action of a controller. You can also generate routes and URLs, avoiding the need for code strings in your views (yes, this's not Sinatra anymore). In general, "routing" is how URLs are "handled" by your application. In the case of Rails, it's generally what controller and what action from that controller will handle a particular inbound URL. In Rails applications, the paths are located in the file config/routes.rb.

A great way to set your routes is using resources :users. This would automatically create seven routes (all of them connected to our UserController actions. The seven routes are the following:

Routes can be declared available only to specific members (not collections) using the method resource instead of the resources in routes.rb. With resource, an index path is not created by default, but only when one like this is explicitly requested:

Another really useful way to organize our routes is by using nested routes. The way I use to understand nested routes is thinking about it like a really organized way to create routes based on your ActiveRecord Associations. For example, you could guess a figure has many comments just to looking a route like this --> "/figures/2/comments/4".

There's two really important rules I just learned using nested routes this past couple of weeks:

If we didn't specifically restrict the routes, Rails would generate all the typical routes for the nested resource as well. Be really specific and have a clear idea of how your routes should look like.
As a general rule, never generate any of the member routes when nesting. Member routes should only belong to top-level resources. There's nothing wrong with defining the same resource at two levels.

Routes can be confusing at first, but if you have a clear understanding of how to use RESTful routes and how to set up your associations from the beginning this task would be one of the most useful because your routes are that first real interaction with the logic behind your application.

Thank you for reading! :)