Intro to React Applications, JSX & Insights

 So I found that I was not as thoroughly aware of how JSX works so this post is a placeholder for any insights I may gather about JSX.

Hello World JSX

Following is how you would create a react application:

npx create-react-app jsx_learning_repo

Once you have a folder / directory called jsx_learning_repo created, you may go into it and look for the file index.js to modify.
It is likely to be located in a location similar to this one : https://github.com/mrarthurwhite/jsx_learning_repo/tree/master/src

Now that you have an application created you may write the following hello world react application. In Index.js write your greeting:

[BEGIN CODE] [END CODE]

React DOM in lines 2 and 7 is a renderer for React: it handles rendering components to the DOM or to a string for server-side rendering.
Line 9 obtains the root element in your index.html file which is your single page application. It is in this div element with id of root that all of your react components will render.
Once you have edited the index.js file you may view it by running your application. You run it by going to the folder/directory jsx_learning_repo for the application and typing:

npm start

Hello World JSX part 2

In the example below, we declare a variable called name and then use it inside JSX by wrapping it in curly braces ( again this is the edited version of index.js):

[BEGIN CODE] [END CODE]

The above illustrates the use of JSX and interpolating curly brackets "{}" to insert variable assignments into expressions. 

You can put any valid JavaScript expression inside the curly braces in JSX.
For example,
2 + 2,
or
user.firstName,
or
formatName(user)
are all valid JavaScript expressions. Here is an illustration of expressions:

[BEGIN CODE]

[END CODE]

The above gives the following output :

 

 

Hello World JSX with user defined components

Previously, we noticed that we could use html elements or DOM tags like <h3> & <div>
However, elements can also represent user-defined components like: <Hi>.

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object.
We call this object “props”.

For example:

[CODE] [/CODE]

In the above the functional component "hi" is the function Hi above in line 4 with its argument called props. In line 8 we define this user defined component Hi. And finally in line 11 we use this  component or render it to the DOM.

Method Reference :: Operator illustrated

I have not seen any atomic & accessible illustrations of the use of method reference operator (::) in Java.

The method reference operator (::) is a shorthand which tells the Java JVM to pass parameters automatically to a method. 

If your lambda expression is like this:

str -> System.out.println(str)

then you can replace it with a method reference like this:

System.out::println

The above is a simple example with simpler & easier examples and instances to follow

The way the following illustrations work is so: first we will illustrate the straightforward way of doing it and then we will illustrate the same thing using the reference method operator (::).

Method reference to a static method of a class

Following illustrates passing parameters to a static method:

[BEGIN CODE] [/END CODE]

The print out from the above code is:

 

Line 8 above goes over the straightforward implementation of taking an arraylist & going over its elements and printing them out. Line 8 says : take an element of the messages arraylist as the str variable (short for string) and print out the string variable str. Then Line 9 does the same thing as line 8 but using the method reference (::) operator. All the rest of the examples will follow the same pattern. 

Method reference to an instance method of an object

The source code would be:

[BEGIN CODE] [/BEGIN CODE]

The output from the above source code would be:

As you may observe from above (line 19) illustrates the use of the instance method of a String object (alpha) , the instance method being startsWith. Line 19 illustrates the straightforward implementation (without using the method reference operator ::) . In contast Line 23 illustrates the use of the method reference operator (::).

Method reference to an instance method of an instance to be determined at runtime

The source code would be:

[BEGIN CODE] [/BEGIN CODE]

The out put from the source code above would be:

As you may observe from above (line 17) illustrates the use of the instance method of a String object (txt) , the instance method being isEmpty. Although Line 17 illustrates the use of a straighforward lambda expression line 19 illustrates the employment of the refrence method operator (::).

Method reference to the constructor of a Class

The source code would be:

[BEGIN CODE] [/BEGIN CODE]

The out put from the source code above would be:

As you may observe from above (line 7) illustrates the use of the constructor of an Example object . Although Line 7 illustrates the use of a straighforward lambda expression line 8 illustrates the employment of the refrence method operator (::).