How to learn React.js from zero to hero

This post is where I shared my experiences learning React.js by building a front-end development experience.

How to learn React.js from zero to hero
Photo by Nubelson Fernandes / Unsplash

 Hi there, my is Mark, a computer science student and a tech entrepreneur based in Taiwan. Understanding how to build front-end solutions has allowed me to seize various business and learning opportunities. From building a personal website to building a full-stack web application, there are tons of things you could be created with web technologies. So today, I would like to introduce one of the most popular front-end development technology or library, React, to help you build your first personal website with React.js.

 Firstly, React.js is not an existing web framework. Instead, it is a flexible front-end library that allows us to quickly build websites or other web components. One of the most common ways to create a front-end web application with React is to use an npx command, create-react-app, to initialize the application without tons of manual set-up. By the way, there is a quick start guide for us to reference.  

Create a New React App – React
A JavaScript library for building user interfaces

 Nextly, you would need to learn more about the concepts related to React.js, for example, React States, components, props, etc. These are the critical techniques you need for your software engineering pathway in React.js. Mainly, how to use the existing hooks from React library to create your own React Hook and quickly build an interactive interface.

 Then, you will need to build some projects with the skills you acquired from these learning subjects, from NPM to React.js. From my experience, you could start by making a personal website with only the built-in front-end framework. Once you learn more about web development, you could integrate with other content management platforms, like Ghost, WordPress, etc. It is pretty essential to learn how to deal with API requests as well as a front-end developer.

 Building a personal blog or website will allow you to take advantage of existing UI libraries, like Chakra UI or Material UI. Both libraries are most common in front-end development, especially for React developers. These tools will eventually make your website look prettier with less development time needed.

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Simple, Modular and Accessible UI Components for your React Applications. Built with Styled System
MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.

 Ultimately, it is a long road to take as a web developer or a front-end software engineer. However, it is crucial to building a sense of community around you to learn and build together. Don't fly solo. Share your work and progress with others. Even the problem you encounter now might be a valuable experience for others in the future. Let's build it.