What React is and How to Learn it as a Self-Taught Developer
Six months ago, I started my web development journey and in this blog-series, I share with you how and what I learned starting from a beginner to what I know now. Hopefully this can help you out in your journey to becoming a web developer.
In the first blogpost of the series, I talked about my first two months studying to become a web dev. I talked about how learning HTML, CSS and Javascript was beneficial in learning the pure basics of web dev. If you want to read that post head over here.
In the second blogpost, I discussed how I went further into learning Javascript by creating projects such as websites, but also other projects like:
- Calculator
- Random Joke Generator(using an API)
- To-Do List
- …etc
Getting a grasp of the more complex areas of Javascript really widened my perspective of the possibilities of using Javascript.
We also talked about learning GitHub and why that is very beneficial to learn, especially if you are planning on working effectively with others on projects.
For the past two months, I have been focused on learning React JS, which is a Javascript framework/library.
What is ReactJS used for?
React is a programming library that is built on Javascript code, and utilizes components in building web apps.
The component structure of React makes it easier to maintain and update code as it is more modular than regular vanilla JS. And one of the best things about React is that your components are easily reusable when using hooks and props.
What is Hooks in React?
Built in the React library are these functions called «hooks». Hooks will let you easily update any state that you have in your application. It will also allow you to effectively utilize side effects such as fetching data through APIs or storing information.
Here are some of the most common hooks that you will use in React:
What is props in React?
Prop stands for properties and is used to transfer data(information) between components. Props are typically passed from the top component down. You can pass information such as a person’s name, a title of a blog post, or really any information you need to transfer.
To learn more about props check out the React documentation here.
What is React Router?
After having built a few projects using React(like websites and an IMDB Top 100 search bar), I discovered React Router, and man was I amazed.
When first learning React, one of the aspects of the web apps/websites that I liked were the seamless navigation there was when clicking from one page to another on an app or site.
Come to find out that this is due to React Router. When using regular vanilla Javascript, you simply use the <a href> tag to link to another page on your site, while using React Router is a little more complicated than that to set up. But in turn, the user experience on your site drastically improves(in my opinion) on the sites that use React Router. To get an example of what I’m talking about try navigating around the official React Router website.
What is Sass vs CSS?
Investing in learning Sass after you have learned CSS properly, can be worth your while. I learned the gist of Sass in a few days and can see myself using it in future projects.
Sass stands for Syntactically awesome style sheets and is a CSS compiler that allows you to use variables in your styling.
This makes it a lot simpler to style your website, especially if you have multiple pages, where you have a lot of the same color, fonts, padding, margin, buttons, etc being used. You can simply create variables for any CSS that you need to reuse.
This is great also because when you need to update anything on your site, you just need to update your variables instead of updating each and every class, id, and other selectors.
Sass will also allow you to organize your styling into organized folders, which all compile into one single CSS file.
React Router, Payments and eCommerce Project
For the next two months, I will be working on implementing React Router in a new eCommerce project. I will also dive into implementing payments on that website(probably using Stripe or Paypal).
And I will also be working more practical with using the useState, useEffect, and more hooks like useReducer.
If you’re reading this and you are a complete beginner in the web dev world, just know that in just four-six months you can learn so much and get a lot of experience(and perhaps be job-ready).
My biggest advice to you is to start with figuring out what programming languages you need to know to get the job you want. Then take small steps every day towards learning that(or those) language(s).