React JS tutorials for Beginner in JavaScript
This course has fundamentals of React JS - Class and Functional components, Props and States, JSX, lifecycle events, events handling, Data flows.
React JS is a very simple and small framework designed for frontend web developer. The good thing about this framework is its simplicity and how with a simple knowledge of JS you can make react components. In this series we will understand the very fundamental concepts of React. After this basic course you might need to work on a simple project to understand all concepts in action.
#1 What is React JS ?
In this video, we will briefly have a look at simple react application - to understand what can be created using a React JS based application. This video is just for demonstration purpose and many of the key concepts will be explained in later videos of this course.
#2 React JS - Functional Components
Functional components are easiest way to create components in React. These days more and more developers are using functional components to create any kind of reusable components. We will understand the concept of props also in this video.
#3 React JS - JSX
JSX is an XML-like syntax extension to ECMAScript, or you can say HTML style version of JavaScript. This helps developer to build JS components but having a mind-set of HTML developer. Remember JSX is not HTML but looks like it, hence it has lot of differences from writing a HTML.
#4 React JS - Default Props & PropTypes
Default Props and PropTypes are ways to restrict how props are entered in a component. Default props are used to provide default values in case we are not providing a value. PropTypes restrict data types which can be passed to props.
#5 React JS - Event Methods
Event handing is an HTML concept which is very similar in JSX also. Here in this video we will find how you can bind a function to an event of a HTML element. Using events we can pass useful information to the function.
#6 React JS - Class Components
Class components are more complicated than Functional components, they follow the ES6 class notation. We have to initialise a constructor and other functions just like a class. However class is more organised for a complex component which may house a lot of useful functions and states.
#7 React JS - State
State is a useful Object in ReactJS which store information related to various data states of a component. Without states a component is said to be pure component. A stateless component or functional component is very simple but has no memory of its own. A Stateful component has its own memory and can hold different states of UI.
#8 React JS - Parent to Child data flow
When you have a Component which is inside another React component, we call this relationship Parent-Child relationship. Parent component is the outside component and Child component is the inner one. When we send some data from parent to child - its is mostly sent via Props. This is also called the downward data flow and very useful in most of the cases.
#9 React JS - Child to Parent data flow
When you have a Parent-Child relationship of components, and you want to share data from inner Child component to Parent components - it is called an Upward data flow. It is less easy and intuitive to make this flow, but sometimes it is required that child components send their data up to the parent which might be managing the state. This kind of interaction is possible by sending functions as downward data and receive their calls in upward direction.
#10 React JS - Event Object and Handling
We have seen how to bind events to React components, In this video we are looking at additional data sent by these events (in form of Event Object). This can be used in various interaction specially handling data in forms.
#11 React JS - LifeCyle Methods
LifeCycle methods are ways to control - how a particular logic can be executed during life of a components (creation, loading in view, unloading from view). This can be helpful to automate lot of initialisation tasks and cleanup tasks.
#12 React JS - Children Props
Children Props are special props which can contain a complete set of JSX/ HTML as part of the props. This can help in components which use their inner HTML part for execution purpose - and make such components more flexible.
#13 React JS - Using Forms and Values
Using forms might be one of most common work of any developer. In this example we will see how to handle and get the data from a simple form in React Js applications.