Javascript Framework React
Javascript Library React
React JS
React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications by dividing the UI into composable elements. It was originally developed as an in-house library for Facebook, and then it was later open-sourced in 2013.
To know more about React and what it offers, go through the following article
Fundamentals of React JS
React is all about components
React is designed around the concept of reusable components. You define small components and you put them together to form bigger components.
All components small or big are reusable, even across different projects
There are two types of components Functional Components and Class Components each of one having their own pros and cons
Here is a video explaining the difference between them
or you can read the following article
React Functional Components VS Class Components
What the flux is JSX?
JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.
It allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
You can refer to the following tutorial for understanding the concept of JSX
Understanding the Basics of using JSX with React
Styling in React.js
React allow you to include CSS in his components in several ways
The following articles gives you an overview of styling in React and we can implement them
The What, Why and How of React (Styles)
Different ways to implement CSS
9 Ways To Implement CSS in React JS
For scoping CSS/SCSS in React JS
🦄 How to scope your CSS/SCSS in React JS ⚡️
Hooks
Hooks are basically functions that let us include react state and lifecycle features without using Classes, and organize the logic inside a component into reusable, isolated units. They were introduced in 2018 (available from v16.8.0).
You can read this article for more info
Everything you need to know about React Hooks
or you can go for the following video tutorial
Next JS
Before diving into Next JS you need to know about Client-Side Rendering(CSR) and Server-Side Rendering (SSR)
This article will help you in doing so
Client-side vs. server-side rendering: why it's not all black and white
Ever since the enormous spike in popularity of highly dynamic front-end frameworks such as React, web developers have been trying to find a balance between the interactive user experience offered by client-side rendering, and the various speed and optimization related benefits provided by server-side data rendering.
One easy way of combining these techniques to get the best of both worlds is by using Next JS, a simple and flexible framework built on top of React, which allows users to utilize a wide range of features like server-side rendering, static site generation, easy file-based routing and much more!
To know more about Next JS, you can read this tutorial
Introduction to Server Side Rendering with Next.js
Some other resources that will come handy while working with Next JS
-
Page Routing
-
CSS Modules
-
Next JS Handbook
So much for the conceptual part, let's get started with coding!
Here's a crash course which will guide you in setting up your first React Project
After going through the basics of React you can go through the following beginners tutorial to Next JS
Bonus Treat
The complete documentation of Reacts JS and Next JS can be found here in case you wish to dive deep
Here is the article comprising of all the fundamentals of React JS discussed above
React.js Tutorial: The Complete React Introduction
Challenge and Submission
So much for learning, here is your next Assignment!
This Blog is a part of CSoC'21 Dev Frontend.
Remember, deadline for this task is July 2nd, 2021 23:59.
COPS-IITBHU/csoc-2021-task-3-reactjs
As you are aware, you will need to fork from and the repository, clone the forked repository, complete the task, commit and push your changes and finally open the pull request back here.