Why every Developer should know React
Prerequisites before Learning React
- Javascript ES6+
- HTML
- CSS
- NPM
- Object Oriented Programming
What is React and how is it used
React is a javascript library that’s intended for building UI’s and is excellent for fetching data. In order for the user of either the mobile or desktop device to see what’s going on the screen, the developer should use components to allow live updates and re-render what’s being displayed. In order to use components the developer should use the following line of code.
What Is JSX
React uses classes to take in properties and return information to the render method. The render method like the component shows what to be displayed on the screen. The render method would usually hold JSX syntax information like this. We can see that JSX allows us to create children which is displayed in the ul tags.
JSX (JavaScript XML) is an XML syntax for React that helps React with re-rendering. JSX is not html. Its inside the javascript file and it helps for easier readability. JSX is a representation of Objects. An example of this is this bit of code.
The above code is the same as declaring a variable using XML inside of javascript. Declaring a variable like this is called making a React element. This is also used for the DOM.
Rendering
Render is a great way of implementing DRY. To work with render you need to pass the function inside the component which creates the react element. A good example of this is the following bit of code.
This render function still uses JSX inorder for it to make the react element. It’s important to know that React elements are immutable which is the state of an object that can not be changed. Meaning that the children or the parent will not be modified. A summary of render() at this point is when a property is passed into the render method and does this by using the “this” keyword to pull in the property from the component.
The passing of properties is what allows information to be fluid inside React. To have live changes inside the DOM we need to render to return from the component child class.
Component Child classes
Components are Javascript functions to put them simply. The conventional way to write a component is using the ES6 way of using classes like this.
Adding a button tag to this JSX will make this component an interactive component which is useful for things like pop ups. The above is a component because it takes in a property and then returns the React element. Having memory in the component class is a good idea to save things the user did. This is called state. Using the command state is as simple as doing this.state.value. Another example of this is
We can acknowledge that the “state” is used inside the constructor because it uses the render method to return properties back into the React elements. Calling the state component will also automatically re-render the child components. Some simple rules of components are that it must never modify its own properties. Doing so would make the class its inside entirely useless because it cant be repeated for another instance. This type of programming is also called “Pure”. An impure function would change its own elements like this example below.
The “state” keyword is almost like a substitute for props(properties) inside the object. We would use state also inside the render method to store a variable. Some rules of using state is that props has to be called inside the constructor. An addition to “state” is setState. this.setState accepts a function from the past argument. this.setState is used for re-rendering a component in the class that the “state” keyword would not be able to do. setState can also be used to update a variable without updating the entire state class.
The key “posts” is being updated from the object state which was declared outside this snippet. The other key-value pairs inside the state object are not being changed with this because of the keyword “setState”.
