REACTion
As a novice coder, getting into React felt like stepping into a whole new world hidden in your backyard. It was as relatable as it was astonishing to see JavaScript used in a new versatile way! Having a base knowledge of JavaScript may give you a jumpstart, but React has some tricks up its library to simplify how you develop web apps!
JSX & Functional Components
React typically utilizes a special syntax called JSX (JavaScript EXtensible Markup Language) that combines html and Javascript. The code is rendered in such a way that it will create html elements with whatever properties (and/or other elements) that are inside, and ultimately append to a main container in the html body div called 'root'.
This is done by compiling chunks of JSX written into what are called components; the building blocks of writing React apps!
These components can be separate reusable bits of code, that can potentially be useful in other implementations within the app!
Only one component is responsible for appending your application to the 'root' div, and that is 'index.js'.
Now, you might be thinking: if only one component can render my whole application to this div, why do I need other components? Well, besides versatility, the magic of components is that you can connect them via importing and exporting their data to be sent and received by other components!
The first 'external' component to be imported by 'index.js' will always be 'App' ( or whatever you want to call it, really). This 'App' component is what will contain other components that are being exported by importing them.
Much like the DOM tree, React displays what is called the React Tree! While it may sound so similar, the React tree displays the order of which components are ordered by a hierarchy-
The 'App' component is the highest, or 'parent' component in your application, with lower sub-level 'children' components; they may be siblings by means of sharing a common 'parent', or even be parents to other 'children' components.
Here, the 'QuestionItem' component is the child of the 'QuestionList' component, that is the sibling of the 'AdminNavBar' component, and are respectively both children of the App component.
Props
Components can only send data downwards into their children via properties, or props. These props are 'passed down' from parent and received by child as their arguments.
The 'ClipBoard' component will iterate this array with the .map() method and for every element in that array will return a child component with the prop of 'name = {name}'.
The 'List' component will take in that prop of 'name' in the form of an argument and now has access to that data! With this data, 'List can return an h4 tag with the content of 'name'.
Whenever an iteration takes place, you will always want to include a 'key' prop to equal some sort of unique id; this will prevent error messages!
Prop Drilling
Sometimes, there will be cases where you need to send down information to a child of a child (or grandchild) or even deeper rooted children. this method is known as 'prop drilling'.
Prop drilling simply means passing down the same props to the children components, and from those children to their children, and so on.. This is incredibly useful for receiving data from the children up to the parent via callback functions within the children!
Inverse Data Flow
Parents can only send down data to their children via props or prop drilling. Children send data back up through the parent(s) via a callback function. This is how components work together.
For example: A child form component can contain a handleSubmit function that contains a callback function within it- which was passed down as a 'prop' from the parent, send data up to the parent component by invoking that function with the data in its argument. You will notice the data in the console log traveling from child to parent.
Be sure to be mindful of your variable names, as other developers may one day look into your code, and may be overwhelmed by how lengthy the declarations are!
The overly detailed variable names are for you, the reader to grasp the concept of react code!
State
'UseState()' is a React {Hook} that allows you to add state to a component. It returns an array with two values: the current state variable and a setter function to update it. UseState is key to utilizing and maintaining data that will eventually change within the state variable.
The {Hook} takes an initial state value as an argument and returns an updated state value whenever the setter function is called. React Hooks are JavaScript functions that are responsible for isolating the reusable part from a component.
Here, 'twins' is declared along with 'setTwins'. 'UseState' is set to an empty array. What this means is, the variable 'twins' is an empty array. 'SetTwins' is a function that takes in an argument to change/or update 'twins'.
The setter function is invoked via a callback from a child component containing 'addTwin' as a prop. It uses the spread operator to retrieve the whole array, and adds the newTwin from information sent up.
A general rule of thumb is to always keep your setter functions contained in the same component the state variable is in!
UseState can be used to contain ANY form of data and is a perfect memory bank for validating forms, sending data, and displaying items on the DOM!
These are just some of the many amazing things about React. If you're an avid coder with JavaScript, React will be a Breeze!
Top comments (0)