Hashnode·5yA Better Way to Structure React Projects
Atomic design is Brad Frost’s methodology for building design systems. The idea is that we can take the basic building blocks of living things and give our UI a hierarchical structure based on it. Atomic design is a framework that can help bridge the communication gap between development and design. It is important that developers understand it so they speak to designers in a unified language.
Addy Osmani·5yReact Server Components
React Server Components aim to enable modern UX with a server-driven mental model. This is quite different to Server-side Rendering (SSR) of components and could result in significantly smaller client-side JavaScript bundles. I'm quite excited about the direction of this work, and while it isn't yet production ready, is worth keeping on your radar.
Hashnode·5y🚀 Top 33 JavaScript Projects on GitHub (December 2020)
GitHub snapshot of 33 most starred open-sourced JavaScript repositories on GitHub as of December 10th, 2020. 2020 is coming to its end, and we may do another snapshot. You may compare it to the snapshot from 2018. You can also query the GitHub to fetch the latest results.
GraphQL Editor·5yTop React libraries you need to know in 2021
Gatsby.js and Next.js are two starter frameworks for React. Hook is a light-weight form library for React and React Native. Redux is the most popular choice when it comes to state management with React. Formik is packed with dozens of micro features like different types of validation.
React·5yIntroducing Zero-Bundle-Size React Server Components
React Server Components are still in research and development. If you want, you can check them out during the holidays, or later when work picks back up in the new year. Read the RFC (with FAQ at the end) for a deeper technical breakdown and to provide feedback. Happy holidays, stay safe, and see you next year!
CSS-Tricks·5yHow to Create a Favicon That Changes Automatically
I found this Free Favicon Maker the other day. It’s a nice tool to make a favicon (true to its name), but unlike other favicon generators, this one lets you create one from scratch starting with a character or an emoji. Naturally, I was curious to look at the code to see how it works and, while I did, it got me thinking in different directions. I was reminded of something I read that says it is possible to dynamically change the favicon of a website. We’re going to do exactly that in this article and it will work with plain JavaScript.
Hashnode·5y2 months of Learning React.js and The project I worked on
This article is all about what I've learnt through my React JS journey and the BIG project I worked on to practice. I started with a course Complete Intro to React, v5 on Frontend Masters by Brian Holt which was hard to comprehend because I hadn't read most of the React concepts I guess. Then I moved to freecodecamp React section which explained a lot and made me understand what was going on in the previous course. Finally, I completed the Frontendmaster's React course which increased my grasp of some concepts like Composing and so on.
freeCodeCamp·5yBuild an Instagram Clone with React Native, Firebase Firestore, Redux, and Expo
Build an Instagram Clone with React Native, Firebase Firestore, Redux, and Expo. Build an Instagram clone with ReactNative, Fire Base Firestore and Redux. Use React Native to build an Instagramclone using React Native and Firebase. Use Expo to build a clone of Instagram using the Expo app.
The Startup·5yReactJS Hooks: useState and useEffect.
React Hooks were first introduced by the React community in 2018 with the release of React 16.8. Hooks are functions that let us “hook into” React state and lifecycle features from function components. The Effect Hook, useEffect , adds the ability to perform side effects from a function component.
ITNEXT·5yBuild An App That Books Vacations To The Moon with GraphQL, Lambda, DynamoDB, Serverless Framework…
Learn how to make a bleeding edge fullstack application with the following toys: AWS Lambda, DynamoDB, Serverless Framework, Vue, React and Tailwind CSS. This project was hugely inspired by the folks over at Anomaly Innovations who created the Serverless Stack. The wait is over! Get it for Free!
JavaScript in Plain English·5yJavaScript Frameworks, Performance Comparison 2020
JavaScript Frameworks, Performance Comparison 2020. The ultimate performance battle between JavaScript frameworks. Each library will be compared in 3 categories: DOM performance, Startup Metrics, and Memory Usage. In raw performance, React, Marko, and Ember are the leader of the pack. For those pointing out extra function creations and holding on classes, the performance argument is not on your side.
JavaScript in Plain English·5y12 Best Alternatives To Angular, React and Vue
React, Angular, and Vue are best at their place and have taken their place in the market that can’t be replaced easily. Ajay Kapoor lists 12 alternatives of these javascript frameworks that you can use in case you can't use these three. The alternatives are not small and minimalist.
GraphQL Editor·5yReact vs Angular vs Vue
React, Vue and Angular are developed by big companies namely Facebook and Google while Vue has started as a side project of a Google developer. All are component-driven, but they treat coding them differently along with a number of default features included. Vue is the easiest to learn and can even serve as a stepping stone for learning the two others.
Hashnode·5yTop Chrome Extensions Every Developer Should Use 🛠
Google Chrome is a cross-platform web browser developed by Google. It allows us to access a massive repository of Chrome extensions and resources that make our everyday activities less of a hassle. Below is a list of the best extensions that we can make use of on a daily basis. Let me know your thoughts on this in the comments section.
Hashnode·5yCommon React Hooks cheatsheet - React, Redux, Router and Ionic friendly
React Hooks provide React developers the ability to write functional components while accessing Reacts core features. Hooks include useState, useEffect, useRef, useDispatch and useSelect. UseState allows you to create, read and update a stateful value for your application. UseRef returns a mutable object with a current property which holds a reference to an HTML element.
Medium·5yReact JS
ReactJS is a library that lets you build web applications from scratch. It has two types of components — Functional component and Class component. In functional component we cannot use ‘this’ keyword of JavaScript. We can only write variable value and call functions as events. In react we can have a component holding other components.
The Startup·5ySimplifying React Hooks
React Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without classes. We will cover how to use useState , useEffect() and more techniques to simulate the experience you were having in class component era.
freeCodeCamp·5yLearn About Python Microservices by Building an App Using Django, Flask, and React
Learn About Python Microservices by Building an App Using Django, Flask, and React. Learn About Python microservices by building an App using Django, flask, andreact. Learn about Python micro services by Building a App Using Python Micro Services by Building An App UsingPython Microservices. See more at python-microservices.org.
DEV·5yMy Web Development Study Plan For 2021
As 2020 is coming to an end, I have been reflecting on how much I have learned this year. The things I want to learn generally fall into the following categories:Fundamentals and getting better at things I already know and use. Getting more familiar with backend tools like Docker and Docker Compose.
JavaScript in Plain English·5yIs React Native A Good Choice For A Startup?
React Native is a popular open-source cross-platform app development framework that is maintained and launched by Facebook in March 2015. 42% of developers in 2020 from all across the globe will be using React Native to develop a mobile app for their business. This blog has rounded up everything that helps startups to make an informed decision to develop mobile application.
The Startup·5yHow to Make a Side Navigation Bar in ReactJS
How to Make a Side Navigation Bar in ReactJS. A simple project for React beginners Emmanuel Unyime Follow Dec 31, 2020 · 5 min read.Pre-requisites:Code Editor (Visual Studio Code) Nodejs installed. Basic Understanding Of React’s Props and State. Getting Started.