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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
One of the very first reasons to get up early when you’re beachside is to see beautiful sunrise. Today I spent time on beach area aiming to complete this article I started last night. This is a short article where I wrote about Next.js navigation and its implementation. So without further ado let’s jump into the topic.
Websites and web applications generally have more than one pages. But you may wondering, how to achieve routing in Next.js so users able to navigate between the pages. In this article, we’ll explore how to navigate between the pages but before that, first let’s look into the brief introduction of Next.js.
What is Next.js ?
In our previous article we have discussed about Next.js and its cool features in more in-depth. Next.js is an open-source development framework built on top of React.js. It is React based framework having various functionalities to power up both server-side rendering and generating client side static websites.
Next.js gives you amazing developer experience with all the features it provides for any production ready application. Features such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching give developers a seamless development experience.
Now, let’s explore how to add more pages to our application and how to manage page routing in Next.js.
In this article, we will learn:
Setup project in Next.js
Create pages
Use Link component to enable client-side navigation between pages.
1. Setup project in Next.js
We start with initial setup of the Next.js project. If this is the first time you are trying to create a project in Next.js then refer Nextjs official website where you get an extensive knowledge on Nextjs and its core functionalities.
To create a new app simply write the following command create-next-app, which sets up everything automatically for you. To create a project, run:
npx create-next-app@latest
# or
yarn create next-app
After installation is completed:
Run npm run dev or yarn dev to start the development server on http://localhost:3000
Visit http://localhost:3000 on your browser to view your application
2. Create pages
In Next.js, usually we create separate folder directory called pages. This folder consists of all the pages for the application. Pages are associated with the routes based on their file name. For example:
pages/index.js is associated with the / route.
const Index = () => <h1>Home page!</h1>
export default Index;
pages/about.js is associated with the /about.js route.
export default function About() {
return <h1>About</h1>
}
3. Link component
Now we use next/link to enable the redirection between pages. To link different pages, we use <a> HTML tag. Next.js uses Link Component from next/link to wrap the <a> tag. <Link> allows you to do client-side navigation to a different page in the application.
To use Nextjs <Link>
First, open pages/index.js, and import the Link component from next/link by adding this line at the top:
In this example we create about us page only for simplicity. Therefore, open pages/about.js and start writing content. You can add rest of the pages later.
function about() {
return (
<div className="container mx-auto px-4 sm:px-12 py-12">
<h1 className="text-xl font-medium">About</h1>
<p className="text-md font-base py-12">
is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
);
}
export default about;
Wrap Up
In this tutorial we learnt how to use Next.js link to navigate between different pages on the websites. Next.js comes with so many great features including Client-Side Navigation and Dynamic Navigation but in this example we have used client-side navigation using Link tag. Now linking pages in any Next.js website is easier than ever, Huge thanks to the Next.js team.
Demo
Full Code
You can get full code from my GitHub repository. Also this demo is deployed in Vercel. Have a look!
Visual Studio Code is undoubtedly the most popular code editor today. It is lightweight code editor developed by Microsoft for Windows, Linux and macOS. It includes various features such as syntax highlighting, debugging, intelligent code completion, snippets, embedded Git, code refactoring and many more. VS Code provides better performance and stability compared to other code editors in the market.
Microsoft has huge market place for VS Code where developers able to get third party plugins and extensions, availing VS Code more rich and efficient. Today we are discussing top 11 plugins for VS Code which provides invaluable to the speed and quality to your projects.
In this guide, we’ll explore the following extensions.
GitLens supercharges the Git capabilities. GitLens helps you to understand code better. This powerful and feature rich tool helps to quickly look into code changes such as who, why, and when a line or code block was changed. You are able to find code history to gain further insights as to how and why the code evolved. With this tools, you can effortlessly explore the history and evolution of a codebase.
Here are just some of the unique features GitLens provides,
Effortless revision navigation (backwards and forwards) through the history of a file
Developers love to open multiple windows of VS Code as they work on more than one projects at the same time. For example, both backend and front end project could be opened in two separate VS Code instances and developers might want move from one project to another. Using this extension developers able to change the color of each project windows, so that it can be quickly identify which project or repo they are working.
TailwindCSS is a utility-first CSS framework that has been gaining huge attention among the web developers. If you love Tailwind CSS then this is a must have extension to have. It is a free extension, published by Tailwind Labs (bradlc). This extension provides autocomplete, syntax highlighting, and linting for Tailwind classes. With this extension, developers don’t need to memorize the exact spelling of all the utility classes or to spend the time typing them out.
Linting highlights errors and potential bugs in both your CSS and your markup. It is the process of checking the source code for Programmatic as well as Stylistic errors.
In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.
As our functions get more complex, it becomes more challenging to keep track of opening and closing brackets such as parentheses and curly braces.
We can use a VS Code extension called Bracket Pair Colorizer to add color to each set of opening and closing brackets, making it easier to identify each set of brackets.
If you are a true React JS developer then this is a must have snippet for you, because it simply does just right for you. This plugin provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code.
Developers have different opinions on how to format the code structure so it would be readable. Prettier was created as a means of alleviating this challenge and ensures one unified code format within the development team.
Prettier reformats your JavaScript code consistently so that it make easy to read and understand the code. This plugin helps to format spacing, variable declarations, semi-colons, trailing commas and much more.
You can configure Prettier to format your files when saving them or committing them to a version control system (e.g. Git, SVN). This way, you do not have to worry about your source code formatting and Prettier takes care about it.
Most of the tags in HTML/XML need a corresponding closing tag. When writing large applications which consists of thousands and sometime millions of lines of code, the corresponding closing tags might located at very bottom of the editor, where developers has to scroll hundreds and thousand of lines below. It is tedious if you want to rename the tags.
Auto Rename Tag provides us with a feature that when we change the starting tag it will automatically rename paired HTML/XML tag, same as Visual Studio IDE does, making the renaming of tags easier.
You can simply install the plugin using VS code Extensions. After installation, Add entry into auto-rename-tag.activationOnLanguage to set the languages that the extension will be activated. By default, it is [“*”] and will be activated for all languages.
Another great contribution by Microsoft. Live Share enables you to collaboratively edit and debug code with other developers in real time. Using this tools, pair programming has become more convenient, where developers can instantly and securely share the project with other developers.
It shares all of their editor context meaning, other developers do not worry about cloning any repos or SDKs installation for code review and debugging process.
Download and install the Visual Studio Live Share extension for Visual Studio Code. If you want to integrated voice calling, then install the VS Live Share Extension Pack, which includes both the Live Share and Live Share Audio extensions.
Let Visual Studio Live Share to finish installing dependencies.
Once complete, you’ll see Live Share appear in your status bar. You can now begin collaborating with others immediately!
Quickstart (Joining)
Click the session URL the “host” sent you, which will open it up in a browser. When prompted, allow your browser to launch VS Code
You’ll be asked to sign in the first time you share (using a GitHub or Microsoft account), which allows others to identity you when collaborating.
That’s it! After you join, you’ll be immediately presented with the file that the “host” has open, and can see their cursor and any edits they make.
Additionally, you start out “following” the host, so as they scroll or navigate between files, you’ll follow along with them. This makes it easy to orient yourself with the issue/question/task you’re about to start collaborating on.
Having descriptive icons help you differentiate between files and folders in the project. Having icons in your project make more interesting and attractive. Below diagram depict different between two VS Code tabs with One having icons, the other does not.
This plugin lets you to highlight TODO, FIXME and other annotations within your code. This is really a useful plugin for highlighting comments such as NOTE: , TODO: , DEBUG:. The customization settings are also quite extensive making it perfect for the developer, thus leading level up your comments on any project.
Tabnine is the AI code completion assistant already trusted by millions of developers to amplify coding accuracy and boost productivity. Whether you are a new dev or a seasoned pro, working solo or part of a team, Tabnine AI assistant will suggest team-tailored code completions in most popular coding languages and all your favorite IDEs.
Tabnine is powered by sophisticated machine learning models. It is trained on more than a billion lines of open-source code from GitHub.
Tabnine suggests and predicts code as you write. This powerful extension speed up your development, save you tons of time and cutting your coding time in half. Currently it support almost all the popular programming languages including Python, Javascript, Java and React.
Tabnine’s Team Learning Algorithm studies your team’s code, preferences, and patterns, continuously learning and adapting. Every interaction with a team member amplifies code completion accuracy.
Installation and Configuration
Press Cmd+P (mac) or Ctrl+P (Windows) in your Visual Studio Code, type ext install Tabnine.tabnine-vscode and press Enter
Click the Reload button in the extensions tab
The default behavior of Tabnine uses the Enter key to accept completions. If you would rather use the Enter key to start a new line, go to Settings → Editor: Accept Suggestion On Enter and turn it off.
Conclusion
In this article, we reviewed 11 VS Code extensions that can help to make you a better programmer and boost your productivity. There are many more other cool extensions that we need to explore in future, so If we have time then will definitely look into those extensions in the coming articles.
Building high quality cross-platform mobile app is extremely difficult technical challenge. If you are building a cross-platform mobile application, there are two popular option to choose.
They are React Native from Facebook and Flutter from Google. These two frameworks are mature enough to achieve same fundamental goals, builds apps for multi platforms such as iOS, Android and the Web from a single code base.
In this tutorial we look into the detailed side-by-side comparison of these two popular technology. The key areas we look in this tutorial are:
Features
Tooling
Developer experience
Performance
The code structure
Let’s start by comparing the programming languages that have been used in these two frameworks.
Programming Language
React Native
In React Native we code apps in Javascript. Basically React Native is just an extension of Javascript language. It also support TypeScript incase if you want add type system on top of the Javascript.
Flutter
Dart is the programming language used in Flutter. Dart is a client-optimized language which helps quickly develop apps on any platform. Flutter runs in the Dart virtual machine, which features just-in-time execution engine. Flutter apps are compiled with ahead-of-time (AOT) compilation therefore it has a better performance.
Ecosystem
Now let’s look at the ecosystem of both these frameworks. According to recent Github stats, these two frameworks have the most active repositories as of 2021.
Development Philosophy
A complete React Native project basically needs bunch of third party plugins and dependencies, however React Native comes with minimal bare bone architecture. In most of cases the open source community develop and maintain the those plugins and dependencies for React Native apps.
Flutter on the other hand comes with huge set of widget library. It consists of large number of plugins and packages developed by flutter team. Dart also has package manager called pub and there is huge ecosystem of open source packages for flutter as well.
Architecture
Now let’s discuss the underlying architecture of these two technologies. First, how React Native works?
Under the hood React Native runs two separate javascript threads. One is the main thread to run the app on whatever native platform and the other is a thread to run the business logic of your application. These threads are isolated from each other but sometimes they need to interact so there is a bridge in the middle where they can pass serialized messages back and forth.
Because of this architectural design, it allows Javascript to communicate with native platform. When React Native renders a component it is a truly native component on the corresponding platform. It is not just a react website bundled as a mobile app but it’s truly rendering native components. That means the user interface of the application looks exactly like native components.
Instead of rendering native UI components, Flutter has its own high performance rendering engine built with C++ and Skia graphics library that renders its own custom pixel to the screen with compile native code that allows it to render pixel perfect versions of iOS and Android widgets while also making it to possible to paint your own custom pixels to the screen.
Developer Experience
Now we look into the developer experience for both technologies. Starting with initial setup, for React Native we can generate new app by running the following command.
After installing SDK for flutter, we can run the following command to create a flutter project.
flutter create my_app
You might have noticed, creating a flutter project is considerably faster, because it doesn’t reached out to npm to download bunch of npm packages. In flutter project we can find pubspec.yaml file instead of package.json. Pubspec.yaml file is used to register and install all the necessary packages for the application.
Project structure for flutter is more simplified when compared to React Native project. The main config file for flutter is pubspec.yaml while in React Native is package.json file.
Tooling
Now we can look into the common tools used in each technology. Having a really good tool set is important when we develop cross-platform mobile apps because without good tooling development life cycle will be miserable. It is possible to run mobile apps locally using emulators to see changes we make during development phase.
To run a React Native app locally we need to follow these steps. First run the following command to connect application locally.
adb devices
Using adb command we can connect to the application locally. From there we can run npm start command to watch the changes in the background. To enable development server we simply run the following command.
npm start
Now we can build android app using the command below. This command helps to install the app on emulator and will listen to the code changes then update the application as we make changes. React Native comes with fast refreshing effect which is extremely useful as it preserve the state of the application while reflecting the changes we make to the apps realtime.
npm run android
In addition to emulator tool, we can also use so many open source tools since React Native is Javascript development environment. For example, we can use tools such as Typescript, Ignite UI CLI and Expo to build React Native apps more quickly and efficiently to give you more starting point to the project.
When it comes to flutter, we can achieve the same simplicity. For example we can launch emulator using Visual Studio Code itself. The same hot reload feature is also available in flutter project because dart programming language support just in time compilation. To run a flutter project simply run the given command below.
flutter run
Performance
React Native uses Javascript to connect native components via a bridge. Flutter avoids bridge to interact with native components resulting a better performance for app run time and also for the whole development process.
Flutter uses Skia Graphics Library that means the UI is redrawn each time when any view changes. In flutter, most of the work is handle by GPU (graphics processing unit) resulting smooth and fast UI rendering. This is why flutter delivers animation run time speed of 60fps (frames per second).
However redrawing the whole view instead of just those widgets that change, can affect the performance and speed of the application. Therefore developers need to be very careful when they design and structure the widgets for the application, specially for large apps where views often changes.
Conclusion
Both technology is perfect for cross-platform app development, specially you want release your app on both android and iOS environment more quickly. If your team have is familiar with JavaScript, React Native is the framework for your choice.
If you want a powerful cross platform app with amazing look and feel and strong documentation backing it, Flutter should be your framework of choice.
