Reactjs

React is a front-end JavaScript library. So you probably want to know the basics of JavaScript before diving into react, otherwise you will end up having a rough journey which isn’t good for your productivity. I wouldn’t advice you to fully rely on my article, I had a quite rough journey and after I finally understood React, I better document it for a future me. In this article, I’ll highlight the essentials and most important things to learn and provide a link to the resources as we gear up to creating your first React application. ...

GitHub offers more than just a host for your code. In this short tutorial, I will walk you through deploying a static react app/project on GitHub Pages. I will be using one of my React projects from GitHub: %[https://github.com/achingachris/myRepos] A programmer’s learning tool is by practicing –I said that… Let’s Get Started: This tutorial assumes you already have your react project setup and ready to deploy Step 1: Install the Dependencies (gh-pages): I use npm for my projects, so while in your project root directory, open the project on your terminal or cmd (windows). ...

Now that Next.JS is an awesome frontend tool. How can we get HTML/CSS/JS Templates to work perfectly in a Next.JS project? This article will take you through the steps. Requirements To fully grasp the content, it’s highly recommended that you have the following tools installed on your development environment: NodeJS Text Editor (Maybe VIM?) Basic React.js and Next.JS knowledge Finding a Template For the demo, we will use one of the open-sourced templates from Startbootstrap. We will use the Freelancer theme, a perfect template for a personal portfolio website. ...

Bootstrap is one of the simplest and most used CSS libraries. This article will guide you on configuring a NextJs project with Bootstrap SCSS and JS files. Codesandbox Demo %[https://codesandbox.io/p/github/achingachris/next-bootstrap-template/draft/zealous-archimedes] GitHub: %[https://github.com/achingachris/next-bootstrap-template/tree/config-bootstrap-scss-and-js] Creating a Next.js Project If you already have a NextJS project, skip to the next step. On a terminal, run the following script to set up a NextJs project: npx create-next-app@latest After installation, run: npm run dev A successful setup will run on localhost:3000. ...

In my first week in phase 2 of Moringa School Software Engineering classes, I covered the basics of getting data from APIs and working with forms. The Code Challenge for the week had the following tasks: Fetch Transactions from an API and tabulate them. Add new transactions. The transaction added should be posted to the backend API. FIlter out transactions by description The initial code for the challenge is in this commit. ...

A state is the current data passed in React components. State management in React enables you to dynamically update data in Components. This post will take you through creating an initial state and an event to trigger a state update in Reactjs. Prerequisites: NodeJS Installed Knowledge of React Source Code and Demo GitHub Repo Link Creating A New React App: # create a new react app npx create-react-app state-management-demo # move into the new app's directory cd state management-demo # start the app to see if everything is okay npm start For the Demo, clean the App.js to have the following: ...

When creating a react application/website, most of the pages would be sharing the same content all over. For example the navigation bar and page footer. Instead of importing each component in every page to be rendered, it is much easier and faster to just create a layout component. This post will cover how to create a react app using Layout Components. Live demo: https://hjpx0v.csb.app/ Source Code to the demo: https://github.com/achingachris/react-layout-demo Here is how to do it: ...

What are props? In simple terms, they are data passed into components. When to use props? When building a react application, the UI is divided into smaller parts called Components. Some of these components are re-used in various pages or parts of the application, of course with different data/messages/content. For this to be effective, props are used. For example, a simple react website with two pages, all share a common <Head> element: ...

This is an update to the previous article I wrote on React & Bootstrap Starter Template Why a Template? It’s because they save time. The process of setting up a project can be always frustrating and it’s always repetitive. That’s why I have a template for almost every stack I do. React & Bootstrap I love using Bootstrap because of the almost Zero configuration and the hustle of designing a responsive web layout is taken care of so I just focus on how a site would look. ...

On September 10th, 2020, Facebook Developers announced the 2020 Developer Circles Community Challenge. The challenge was on creating tutorials for using any of Facebook’s open-source products. Submissions were really great and once again appreciating and stressing on the importance of developer communities. I have gone through the regional and global submission winners and I’d love to highlight all React-based tutorials for beginners. Here is the list: (No particular order was followed here :-) ) ...