This week was a bit of a breakthrough week. My current goal was to become a backend engineer, because I thought I've always gravitated towards math related concepts. However, as I searched on the job application requirements for backend engineers, I realized that the qualifications were much more steep and unfamiliar. Even though I still want to learn things like object oriented programming, I realized this week that the requirements for frontend engineering is more geared towards my current skillset. I also started the frontend portion of my project, and I had the chance to go over and reuse a lot of the React basics I had been so familiar with during my bootcamp. I want to take the time to share some of the essential tidbits I picked up during this week that helped me start building in React again.
Dependencies
First of all, in giving this introduction to React, we have to start with the usual dependencies required to work with frameworks. If you don't have node.js or npm you can install both of those here.
Once you have those installed, you have to download the React package to start working with it on the console. To do that you can use the command:
npm install --save react
npm install --save react-dom
These two packages serve two different purposes. The first one is for the react package which is responsible for making components. I'll talk more about components in a bit.
The second is ReactDOM. Once you create the react components necessary, you have to access the DOM and actually display the React code. There's a number of different methods you can use to interact with the DOM, but the basic function necessary for displaying your React code is the render method.
JSX
One note that is also worth mentioning, is this code that you are writing looks like HTML, but in reality a type of Javascript language called JSX. A dependency called Babel (something you download when you install React) is actually responsible for looking at the code you wrote and converting it into Javascript functions, which create the dynamic HTML. This is a huge part in the power of React. What you are doing everytime you run React code is dynamically creating HTML code, and by dynamically I mean running Javascript function code alongside it. This method of creating HTML is much more flexible than simply writing static code and is what allows for React use what it calls components and have them interact with each other.
A common method to help you understand how this is powerful is with something like a common list. Assuming this list is displaying some information that is coming from a database, in normal Javascript, you would have to write a function that actually searches for the id of the element you are looking for and then individually update that object. This would also all be separate from the data you would need to delete from your database.
Components
For React, you have essentially two important parts that allow for dynamic updates. The first I already mentioned, which is creating components. Writing components is essentially like creating building blocks that you'll use in your system. For example, a like button can be a component. If you suspect you will be using that like button multiple times, you have the freedom to access that component from anywhere on your website and just re-use it. You can already imagine how this kind of functionality on a page like Facebook (the creators of React) that repeat a lot of the same elements.
What you also get with components is what is called a component hierarchy. If components are the building blocks of your application, then a React component is large structure made up of those building blocks. There are many ways you can choose to fit together the pieces. You can choose to put a list of cards into a box div that is a component itself. You could choose to put all sorts of different components together to create one dynamic application. Deciding how you want to do this and drawing out your application in terms of components is absolutely essential before you starting your React project.
To get more info on this subject, there is an essential article titled Thinking in React on React documentation, that every React programmer should read before starting.
The second part is the render method on React. The way that react works is that everytime a page loads, every component comes along with it a render method. This is render method has inside of it the component that you constructed with JSX and is responsible for rendering every time it is triggered. This render method is what makes React applications so dynamic, because it can actually be triggered multiple times at specific points in what are called its lifecycle methods. Lets take a look at a diagram to get a better understanding of this.
As you can see from the diagram there are 3 lifecycle methods: mounting, updating, and unmounting. In layman's terms, this is when the component is first created and put onto the DOM, the component is updated in any way, and when the component is taken off the DOM. You will notice that the render method we were mentioning is in both of the mounting and updating lifecycle methods of a component. This is very helpful, because not only do you not have to write vanilla javascript to update the DOM during element creation, you don't have to do it with updates either. I personally find that this is one of the most useful features of React. Anytime your component updates with new information, it does a re-render for you. Very convenient.
The other thing worth noting on the graph are the three functions at the bottom. These are called lifecycle methods, and you can essentially write code that triggers based on the completion of the lifecycle methods. ComponentDidMount is useful for initial data loading, ComponentDidUpdate is useful for data loading on update, and ComponentWillUnMount is data/general cleanup. The other functions that you see are only useful for more advanced, niche cases.
Props
Props are data that you can pass down between components and this allows for them to talk to each other. If you can imagine that list again with many cards, props allows for us to have data that lives on the list component, which it can then pass down to the cards. We can set a props variable that allows for each card to have a different variable based on how we want to make it, but essentially props are the data that you can send to your children components.
State
If the render and components didn't have any new data to display, there would be no point in the React methodology. This is where state comes in. Essentially, state is just a Javascript object which holds some data and is capable of being updated. This object can only be used on class components, and is part of the constructor function of the class component. When you first write the state in the component, you can initialize the component with the initial state. After intializing, if you want to update the state object, the only way to do that is a built in React function called this.setState, where you will put in the next object with the attribute you want to update with its new value. Everytime you set a new state, the update life cycle method will trigger.
File Structure
The last thing I want to talk about is file structure.
This is the basic file structure of a React application. These are what the files are responsible for.
Src - The file with the React code in it.
Public - Static files including your index.html which React DOM will send your root component to
node_modules - The project dependency file
package.json - This is responsible for the configuration of the dependencies for your project
package_lock.json - This is a list of that records the dependencies you have available and their versions
Here you can see what's inside a typical React components folder. I like to use different folders that separate components into categories, based on their utility. I typically like to use a services folder to put an JS file to handle all the API requests, and folders for my pages, containers and components. I'm currently going based on preference, but there's probably going to be best practices on this especially in the work setting.
I found that with this understanding/main points I was able to start building things with React again. There's a lot more on the documentation (especially regarding how to use state/props and lifecycle methods), but I hope this was a good first step in building your first React project!
Top comments (0)