React JS Course - Getting Started Guide to Beginners

Learn Fundamentals of React JS from Scratch. Getting Started guide for Beginners in Building Modern Web Apps in React JS

3.70 (606 reviews)
Udemy
platform
English
language
Web Development
category
instructor
42,211
students
1.5 hours
content
Apr 2021
last update
$44.99
regular price

What you will learn

Complete React JS course from Scratch

You will learn to build Web Application with React JS

Create a Scratch Pad app with React JS

Build stateless components in React

Complete understanding of Refs

You will learn in-depth about Props

Create child & nested elements within the App

Perform CRUD (Create, Read, Update, Delete) Operations in React JS

Description

React JS is a JavaScript Library. This is a Fundamentals course for Beginners who are just getting started with React.

Throughout the course, you will learn what React is and How to use the Popular JavaScript library to build Real-World Projects.

In this React JS Course, we will build a Note-Taking App Project or you can call it Scratch Pad Project.

We will start by learning the basics of React and how to use the ECMA Script 6+ syntax to implement in our project.

I have is divided this course into three main sections:

In the 1st section, you will learn what is React JS and some more details about it. Then we will get into complete practicals. We will install the React Developer Tools in the browser, and then we will install Node JS for React. We would also require a Code Editor, for this course, we will be using VS Code. Then we will create a simple Hello, World! application in React.

Then, we will learn how JSX is used in React.

The 2nd section, it's all about the fundamentals of React. You will deep dive into React Library and understand how everything works. React completely works based on components, so we will learn what a component is in React JS, and also we will create our 1st component in React.

You will also learn what is a Stateless component in React JS, and then you will learn how to create, manage and work with props or properties in React JS. You will learn how to apply events and control the state of every component.

Then, you will learn about Refs in React and how to use them.

Once we have some basic understanding of all fundamentals in React, we will then get into building our live project. You might need some HTML and CSS skills because we will be creating a Scratchpad App with React, so it's going to need some styles.

As for our project, we will start by creating the background or the board, where all our Notes will be stored. We can do this with props in React JS.

Every note or every individual note we create is going to be the child element of that board we created. Here, you will learn how to add child elements to our board in React.

Then, you will learn how to create Notes and not just that, but you will also learn how to update and delete created notes in your React project. Once we get that part done, you will then learn how to add new notes to your projects and update and delete them individually.

Since these notes need to function individually, you need to work with Keys, you will learn how to apply unique Keys to manage individual Notes.

Once we are done with that, you will learn how to mount components and set the default styles of our project. You will learn how to update components and their states.

Our Note-Taking App project needs to be interactive, unlike other Note-Taking apps our project will have the option to drag any note the user creates. Making our Note-Taking app the best interactive App to work with.

Then finally, you will learn how to migrate your App to the Create-React-App project. The modern way of building React-based web applications.

That's it for this course, hope you all will enjoy the course and learn valuable information through it. I am always available in the Q and A section, and through Direct Message. So, if you have any queries or questions please do not hesitate to get in touch with me.

All the best for the future.

Content

React Introduction

Introduction to React JS
Installing Browser Tools
Installing Node JS for React
Install VS Code for React
Hello World in React JS
JSX in React JS

React JS Fundamentals

What is a Component in React JS
Create First React Component
Stateless Component in React JS
Props in React JS
Events in React JS
State in React JS
Adding State to Note Component
Refs in React JS

Sticky Notes Project with React JS

Creating Board With Props in React JS
Adding Child Elements to Board
Updating & Deleting Notes
Adding Notes
Keys in React JS
Mounting Components
Setting Default Styles
Updating Components
Making React Components Draggable
Setup & Install Create React App
Building Scratch Pad With React JS

Conclusion

Conclusion For React JS

Screenshots

React JS Course - Getting Started Guide to Beginners - Screenshot_01React JS Course - Getting Started Guide to Beginners - Screenshot_02React JS Course - Getting Started Guide to Beginners - Screenshot_03React JS Course - Getting Started Guide to Beginners - Screenshot_04

Reviews

Panagiotis
September 28, 2023
It's outdated, the concepts not very clear as in his other courses I have attended to. Only scratches the surface
Suman
July 7, 2023
This course is excellent for all the beginners who want to learn React JS from scratch which will help in building modern web apps
Joanna
March 17, 2022
I like the short and to the point lessons very much. They are simple, easy to understand and very well explained with examples. Perhaps this course will not be very advanced and detailed (I do not know yet), but it is ideal for beginners.
Erick
February 22, 2022
great introduction but needs update the life cycle part now that some methods are considered unsafe on latest releases and think that part (color changing) should be implemented in the main project for a better understanding
Muhammad
October 19, 2021
For the introduction, this is perfect for newbie like me. But can we have the version with react.js from npm?
Patricio
March 20, 2021
Hubiera empezado directamente con el paso .24 y de ahi continuar, sino pierde la idea de los Componentes que es de lo que se trata React
Jorge
January 16, 2021
Terrible, no explica lo que hace, solo escribe código muy rapido y si sigues el código tampoco tiene una secuencia, en las lecciones 15 a 17 usa diferentes clases y no dice para que sirve lo que hace, muy mal curso, en el 17 deje de verlo y buscaré otro
Otto
January 8, 2021
Not a course I would pay, unfortunately there is barely any teaching. Just quick videos to give you an overview. Would be best served as an overview video series on youtube. Also not everyone uses chrome.
bhumika
December 30, 2020
Explained nicely, although some parts need to be elaborated. Also, it would be good, if source code is provided
VenkataGanesh
November 20, 2020
Heartful thanks to the instructor Mr.Fatah Gabrial and Udemy for providing this course. It gives a hands-on experience in building a sample applications with complete code.
Nicolas
October 22, 2020
The course was really nice for somewhat of a seasoned begginner. That being said though I do believe the next couple of points could be handled better: 1) The Course professor could specify in the "Keys in react JS" lesson that the method componentWillMount is a default method inherited from react instead of a custom one and if named differently it would not work 2) I do believe the final 2 lessons or chapters (23 & 24) should have been given at the start of the notes project as a base in which to expand upon instead of manually re-acommodating the whole app to fit a standard create-react-app project. Besided this 2 comments I believe the course is overall great for beginners-intermidiates looking to break ground with react.
Pintu
October 6, 2020
As a beginner, i did not learn Any basics, or syntax, or how react is designed to help me in development. It felt like i was just watching someone code. My takeaway was limited. This course would probably only make sense to someone who already knows React
Edmund
September 20, 2020
I would say this is more of a refresher course. If you learnt React and needed quick videos to remind yourself on code, this is for you. Otherwise, the lack of explanations in the code doesn't bring any value to the course.
Srikanth
September 5, 2020
Short and sweet. Please add some more course around advanced concepts in reactjs. Hope to see more courses on react native, and redux. :)
Royson
August 8, 2020
This is a crisp straight forward course for absolute beginners who has no knowledge in React and want to get started in just under 2hrs time.

Coupons

DateDiscountStatus
8/8/2020100% OFF
expired
8/24/2020100% OFF
expired
9/7/2020100% OFF
expired
9/17/2020100% OFF
expired
10/12/2020100% OFF
expired
10/22/2020100% OFF
expired

Charts

Price

React JS Course - Getting Started Guide to Beginners - Price chart

Rating

React JS Course - Getting Started Guide to Beginners - Ratings chart

Enrollment distribution

React JS Course - Getting Started Guide to Beginners - Distribution chart

Related Topics

3372922
udemy ID
7/28/2020
course created date
8/4/2020
course indexed date
Angelcrc Seven
course submited by