Category Archives: webprogramming

React, React Native, Technology, Web Programming, webprogramming

12 Top Youtube Channels to Learn ReactJS

Posted on by Febronei
12 top youtube channels to learn reactjs
21
Oct

My top channels to learn ReactJS

Hello everyone, today I am going to share my favorite Youtube channels to learn ReacJS from scratch. These channels are so popular and you might already know. If you are new to these youtube channel, then check out once and if you like the content subscribe for future videos.

1. Codevolution

This channel has tutorials on various topics related programming. It contains large number of different kind of playlists regarding ReactJs covering almost all the topics that are beneficial for any developer who wants to master as ReactJS developer. The playlists cover beginner levels to more advance concept such as React router, React with Typescript and state management, Redux and etc.

Stats as of today (20/10/2022)

Joined Nov 20, 2015

430K subscribers 76,468,938 views

Playlists can be found here: Codevolution

2. The Lean Programmer

Creator of this channel Madhav, who has contributed a lot to the programming community and currently working as a Software Engineer at Microsoft. This channel teaches you React from beginner to advanced level by building projects. You can learn React from scratch, state management and React with Typescript by doing the projects on the channel.

Stats as of today (20/10/2022)

Joined Jan 12, 2012

10.4K subscribers 271,051 views

Playlists can be found here: TheLeanProgrammer

3. Academind

If you want to learn programming then this is a go to channel. It contains courses and tutorials that teach you everything related to web development. No matter if it’s programming languages like JavaScript, runtimes like NodeJS or popular frameworks like ReactJS, Angular or VueJS, this channel covers everything. Max is one of the creator of academind, probably best known for his Udemy courses which covers concept more in-depth and providing plenty of information related to programming.

Stats as of today (20/10/2022)

828K subscribers

Joined Dec 4, 2015 67,262,671 views

Playlists can be found here: Academind

4. freeCodeCamp.org

freeCodeCamp.org have lengthy tutorials on various technologies. You’ll find videos on practically anything web development related, from React and JavaScript to Python, Machine Learning, Neural Networks, PenTesting, and more.

Stats as of today (20/10/2022)

6.51M subscribers

Joined Dec 17, 2014 443,968,255 views

Playlists can be found here: Freecodecamp

5. Traversy Media

This is another useful channel you can find on Youtube. Brad Traversy created this channel aimed to provide web development and programming tutorials to everyone for free. You can find latest web technologies from the building blocks of HTML, CSS & JavaScript to frontend frameworks like React and Vue to backend technologies like Node.js, Python and PHP. These videos consists of both short and long videos. The long videos can go up to two hours. In his channel, you’ll find everything related to JavaScript.

Stats as of today (20/10/2022)

1.96M subscribers

Joined Oct 31, 2009 185,480,333 views

Playlists can be found here: TraversyMedia

6. The Net Ninja

Shaun Pelling is a creator of this YouTube channel and you can find videos on various areas includes JavaScript, HTML, Node.js, CSS, Python, Django, Angular, Vue, Git, React, MongoDB, Bootstrap, PHP, WordPress and more. This channel covers basic ReactJS concepts for beginners level to real projects with more advance concepts. You can learn how to develop ReactJs projects with APIs integration such as Firebase backend and Contentful headless CMS.

Stats as of today (20/10/2022)

1.01M subscribers

Joined Apr 9, 2015 128,178,951 views

Playlists can be found here: The Net Ninja

7. Simplilearn

This channel is one of the best channels on YouTube if you want to learn anything related to programming. Simplilearn is an award-winning Bootcamp channel that has wide range of tutorials. The website and channel offer tutorials from experts and cover various topics, including data science, cyber security, and cloud computing, along with brushing up the basics in programming languages and coding.

This channel offers videos that help any learner to begin the journey with the React JS.

Stats as of today (20/10/2022)

2.49M subscribers

Joined Oct 29, 2009 254,531,580 views

Playlists can be found here: Simplilearn

8. Techsith

This channel is making easy to understand tutorials on front-end and mobile technologies using Javascript programming language. The instructor in this channel is a teacher knowing teaching skills and making complex stuffs easy to digest for new learners. The channel provides tips and tricks that help many developers to make their interviews easier.

Stats as of today (20/10/2022)

148K subscribers

Joined Jun 17, 2014 13,242,566 views

Playlists can be found here: Techsith

9. Quentin Watt Tutorials

This channel have videos about learning the basics of Javascript tutorials for beginners.

The tutorials are easy to follow and remember. The React JS playlist has all the basics concepts for any beginner level programmers.

Stats as of today (20/10/2022)

162K subscribers

Joined Aug 20, 2011

20,093,020 views

Playlists can be found here: Quentin Watt Tutorials

10. JavaScript Mastery

If you want improve your development career with project-based coaching, then this is a go-to channel. This channel helps to improve your skills with practical development experience by building or cloning real world applications. You will not regret to spend hours on this channel to learn new techs related stuffs.

Stats as of today (20/10/2022)

427K subscribers

Joined Dec 25, 2018 21,571,276 views

Playlists can be found here: JavaScript Mastery

11. Web Dev Simplified

Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development, Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers.

Stats as of today (20/10/2022)

1.09M subscribers

Joined May 24, 2018 80,446,471 views

Playlists can be found here: Web Dev Simplified

12. Sonny Sangha PAPA React

My current favorite channel for ReactJs. I simply love the way teaches complex topics such as state management and Typescript. He build clones which helps to learn new things much faster. Sonny will deliver a Full Stack Mastermind coaching call which many describe as ‘Worth more than a University Degree itself. His program, Zero to Full Stack Hero is constantly changing new developers lives.

Stats as of today (20/10/2022)

175K subscribers

Joined Oct 16, 2011 9,359,888 views

Playlists can be found here: Sonny Sangha

Thats it! Hope you find these information useful. Feel free to share more similar channels with us.

Nextjs, React, TailwindCSS, Technology, Web Programming, webprogramming

How to Build a Multiselect Dropdown Component Using React-select

Posted on by Febronei
React select dropdown tutorial using react-select. (1)
04
Jul

In this tutorial, you will learn how to use react-select library to create a dropdown selection in your React app. Before that, let’s first understand what React-select is and why should you use this library in your React.js project.

React-select

React-select is an easy to use dropdown library create by Jed Watson and few other awesome contributors. It is a powerful library, offers various features such as multi-select, autocomplete and many more. This is a perfect choice for your next Reactjs project, providing numerous dynamic functionalities to the dropdown components including search and filter functionality, animation, easy accessibility and faster loading time.

Features provided by React-select package include:

  • Flexible approach to data with customizable functions.
  • It handle large number of dataset.
  • Simple customization with API support.
  • Controllable state props and modular architecture.
  • Manage component state easily.
  • CSS styling with emotion support. Provide CSS animation support for components.
  • Long-requested features like option groups, portal support, animation, and more

Step 1: Install React and other libraries

Dependencies used for this project.

  • React-Select Library
  • TailwindCSS for CSS and styling (optional- you can use any styling library)

Run the following command to install a brand new React project. You can either use yarn or npm, but for this tutorial, npx is used. This will create a React app for us.

npx create-react-app react-select

Change the directory and get inside to the project folder. You can always clean the project just a little bit. Remove the files you do not required for this project. 

cd react-select

Install Tailwind CSS

Install TailwindCSS and its peer dependencies via npm, and then run the init command to generate both tailwind.config.jsand postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths

Add the paths to all of your template files in your tailwind.config.jsfile.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwinddirectives for each of Tailwind’s layers to your ./src/index.cssfile.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content and it will reflects the changes you make to the app.

Install React-Select Library

Now, this is important step. We need to install React-select package. For that simply run the following command. 

npm i react-select

Once it is installed, you can now import the react-select module any where in our project. For simplicity it is imported in src/App.js file.

Now create a function that will handle our selected value. Name it setHandle and call it on the component. It will change the current value once user click to the dropdown.

import "./App.css";
import React, { useState, Component } from "react";
import Select from "react-select";

const Hotels = [
  { value: 1, label: "Coral Beach Maldives" },
  { value: 2, label: "Ilaa Beach Maldives" },
  { value: 3, label: "Finolhu" },
  { value: 4, label: "Arena" },
  { value: 5, label: "Kaani Beach Hotel" },
];

function App() {
  const [selectedOptions, setSelectedOptions] = useState(null);

  const setHandle = (e) => {
    setSelectedOptions(Array.isArray(e) ? e.map((hotel) => hotel.label) : []);
  };

  return (
    <div className="mx-auto container py-8">
      <h1 className="text-sm">Select Hotels</h1>
      <div className="flex flex-wrap items-center lg:justify-between justify-center">
        <div className=" px-2	">
          <Select options={Hotels} onChange={setHandle} isMulti />
        </div>
        <div>{selectedOptions}</div>
      </div>
    </div>
  );
}

export default App;

An array named Hotels is created, it then pass the hotel list to the dropdown. Hotel names is displayed when a user clicks on the dropdown and select element with the help of the react-select library.

There are many other properties available and common props you may want to specify include:

  • autoFocus – focus the control when it mounts
  • isDisabled – disable the control
  • isMulti – allow the user to select multiple values
  • isSearchable – allow the user to search for matching options
  • name – generate an HTML input with this name, containing the current value
  • onChange – subscribe to change events
  • options – specify the options the user can select from
  • placeholder – change the text displayed when no option is selected

React Multi Select Dropdown

Multi select option is one of the popular properties provided by this library. let us understand how this is used in a React project. It is actually very easy, simply you need to add isMulti prop to select various value in a select dropdown.

<Select options={Hotels} onChange={selHandle} isMulti />

Thats all for now! You can find code for this tutorial in this GitHub repo