React Basics
At my class at Flatiron, we just finished learning about JavaScript and will start React. In the group project, we had nearly 300 lines of code for JavaScript, and we would have a minor issue finding where we wrote our code for liking and commenting portion. If I recall correctly, Ruby was similar to that too. Then when we learned Rails, we see what we can do to split up the work in multiple files so it will not be too messy. Downside was locating the files.
React was first used around 2015, and the use has exploded 2 years later. So far from the readings and labs I did, React has some new syntax but also utilize JavaScript and HTML. One of the things I saw is that React, like Rails, have multiple files to work from. However, to render features from another file, it has to be imported, something we did not have to do in Rails. But like Rails, it has to be called. Rails uses the symbol “@” so it can be called from just about anywhere. In React, it is “<Example />”. The name “Example” is a file name that is being called in the second file. We shall give the second file a name say “test”. To render, the general code is
A more concrete example is shown in figure 2.
From figure 2, we can see that this file is calling three different files named “CatComponent”, “GraceHopperQuoteComponent”, and “MouseComponent” and rendering them to the DOM through the “App” file. We can see as well that this is a component, “the heart of React” as some say. Everything inside the “render()” brackets is called JSX. The JSX inside “render()” is to return everything inside. In Rails, we use ERB tags that allows us to write Ruby code in HTML files; in React, we use JSX to write HTML code inside JavaScript files. In a nutshell, ERB to Rails is JSX is to React.
In React, we have static and dynamic components. Static components are your original game plan; dynamic is changing it up as we go. An example of static is displaying text; for dynamic, an example is increasing a count by clicking.
Finally, we have props. Say we have many movies. We will have many titles, posters, and directors. Hard coding them all in will be slow so that is where props come in. With props, we can write a few lines of code and we can use that to display all movies. Look at an array. We use a for-loop to display everything inside rather than hard code it all out. Props is a similar idea here. For props, only user this.props if we are referring to a class; use props if we are referring to a value. See figure 3 for an example of props. We see “movie.title” is simply displaying a movie for each “<MovieCard />” from the movie data array.
There is another important tool in React called “state”. The difference between props and states is state is dynamic. An example is updating a like counter in Facebook or Instagram. To make a state, we must define an initial state and code how we want to update it. We can see that in an example in figure 4.
We can also have events in React. This is similar to what we have in JavaScript. In JavaScript, we use “addEventListener” to hear “events” and make the necessary changes. React uses “state” to do such that. If we click, we have to add “onClick” to that button code. There are other examples such as “onChange” to make changes to a count in a text box when we type in characters to reduce the count. Example is in figure 5.
So far, this is all I know about React. As I progress in Mod 4, I should have a better understanding of React.
