Presumed knowledge
-
HTML
Every then and now, we'll need to JSX code which requires us to be familiar with HTML.
-
CSS
Although CSS isn't directly associated with React, we'll also routinely use it to style our React applications.
-
JavaScript
JavaScript is integral to be able to develop any kind of a React application.
Course overview
React is an open-source JavaScript library to help us build interactive UIs (User Interfaces), released in 2013. It emerged as a client-side technology, but is nowadays being used on the backend as well.
Initially, it was developed by a team of engineers at Facebook to be used internally within Facebook, but then later on as developers at Instagram wanted to use this awesome tool in Instagram too, Facebook decided to decouple React from being its proprietary technology to an open-source library.
React is extremely easy to get started with. It doesn't have a steep learning curve, believe it. People generally regard React to be slightly more complex than Vue.js while much simpler than Angular. Regardless, React is intuitive, has a breathtaking potential, and is extremely performant. The most notable features of React include the virtual DOM, the idea of using components to compose UIs instead of templates (as in other UI frameworks), immutability of data, uni-directional data flow, a system of synthetic events wrapping native DOM events, and much more.
The ecosystem of React is also pretty huge and diverse. Once you learn React, you unlock your way into a whole new world full of libraries and tools made to work alongside React and simplify the development process considerably. Learning React can also land you in developing applications for Android and iOS, thanks to React Native.
Today, there is an immense scope of React in the job market out there. Almost every other job lists React as a prerequisite (because it is awesome!). Likewise, investing your time in learning this astoundingly remarkable tool would definitely be a smart choice.
Learning outcomes
React is a simple-to-learn library. But this doesn't mean that there's almost nothing to learn in there. There is a good amount of knowledge that one needs to grasp in order to be able to work with React effectively.
By the end of this course, here's what you'll know:
- What is the challenge of building UIs in vanilla JavaScript and why we need a tool like React to abstract all of its complexity and tediousness.
- What exactly is React and whether it's a library or a framework.
- How to set up the environment for coding React applications, with the help of Visual Studio Code, Rollup, Babel,
servefrom npm, and a couple other related tools. - How to construct a simplistic React program from absolute scratch.
- What is JSX and how to construct a React program with JSX, and why is Babel needed before we could run JSX code.
- Why is React termed as a 'declarative' library and what's the benefit of this approach over the imperative approach of building UIs using vanilla JavaScript.
- The basics of React, including elements, components, props, events, state, fragments, refs, and keys, and how to use all of these to create extremely complicated programs.
- What exactly are escape hatches and how to use them to escape out of the 'React mode'.
- What are hooks and how to use them to bring in given utilities and features to our function components.
Table of contents
Foundation
4 hrs 8 mins 14 chaptersDescription:In this unit, we'll cover all the foundational ideas of React, including how to set up the environment to create React applications. We'll learn about various such ideas as elements, components, JSX, events and fragments, and use these to create some of the simplest programs. From there, we'll learn slightly intermediate-level concepts such as keys, hooks and render props.
Introduction25 minsPrerequisites19 minsSetup35 minsFirst Program17 minsBasics33 minsBasics Quiz-1 questionsA Simple Counter ExerciseVery easyChange The Background ExerciseVery easyElements13 minsJSX32 minsJSX Quiz-1 questionsComponents20 minsFragments4 minsEvents2 minsState19 minsRefs7 minsKeys2 minsEffects20 mins
Frequently asked questions
-
What if I get stuck somewhere in the course?
If you're having a hard time understanding a given concept in the course, feel free to reach out to us via our email
mail@codeguage.com, describing the issue you're facing. We'll try our level best to help you out. -
Some important topics are missing from the course. Why is that so?
Our courses are released while they are still under construction so that our learners can get early previews. As we continuously work on adding more and more content to our courses, if a given topic isn't covered today, there's a high chance that it's already under way and will show up very soon. You can follow us on Twitter to be updated with our latest content releases.
-
How can I ask any general questions related to the course's content?
Write to us at
mail@codeguage.com.
Share your experience
Empower others and help shape new learning journeys!
We are really glad to know that our immense effort on creating this and other suchlike courses got you here. We believe that your insights regarding this course can inspire and guide others on their learning path. We'd really love to hear about your viewpoint on the course and how it helped you improve your skills.
The best part is that you get to post the review from your own Instagram or Twitter account, while mentioning CodeGuage in your post. The process to follow is really simple:
- Write about your experience of a given course and how it helped you in levelling up your skills.
- Include the
@codeguagehandle in your post. (That's important!) - Include the
#SkilledUpWithCodeGuagehashtag in your post.
And that's it! It's that simple.
We sincerely thank you for being an integral part of our community and helping us shape a brighter future for aspiring programmers and mathematicians.
Together, let's build a community of learners. Happy learning! 🙂
Why this course?
-
Free of cost
No need to buy any subscriptions, make any payments, or create any accounts. All the content is available for free.
-
Well-structured
Content throughout the course is organized in a chronological fashion, ensuring a clear and intuitive learning experience.
-
Simple to understand
Everything is explained in plain and concise words, right from the perspective of an absolute beginner.
-
Detailed explanations
Certain concepts require a pretty deep insight. Fortunately, we provide all that insight in easy words.
*The durations mentioned on this page are merely an estimate; the actual time completing the underlying topic/course would obviously be much greater.
