ReactJS and Virtual DOM Diffing

 Here's a nice article on ReactJS, and Virtual DOM: https://medium.com/@happymishra66/virtual-dom-in-reactjs-43a3fdb1d130

Sandbox for ReactJS application

Code Sandbox is a good place to play with your ReactJS samples.

I was able to add couple of pages in no time: https://codesandbox.io/s/compassionate-bhaskara-wbt24

OKTA

Get quick and robust authentication by adding one of OKTA's SDKs to your app or API service.

https://developer.okta.com/docs/

Build user registration with NodeJS, React, and Okta:

https://developer.okta.com/blog/2018/02/06/build-user-registration-with-node-react-and-okta

may be another good read??: https://developer.okta.com/code/react/okta_react/

ReactJS Charts

https://morioh.com/p/48b9a6f4ece6

ReactJS - Hey, don't forget to read the documentation

Good documentation helps to understand the concepts faster. If you are new to ReactJS, this is one of the best pages to begin learning: https://reactjs.org/docs/getting-started.html

It's all about Spring Boot

Building a Spring Boot application with Rest API

• This link has the simplest Rest API building example: https://spring.io/guides/gs/rest-service/
• Also check out the links at the end of the page of https://spring.io/guides/gs/rest-service/ and you will learn almost everything using Spring Boot.
• Also check this page too: https://spring.io/guides#getting-started-guides

Building a Spring Boot and ReactJS mono-repo application

• Look no further! This link has all listed out all the details: https://github.com/kantega/react-and-spring

Spring Boot application with Postgresql on Heroku

• On Mac, brew install Postgresql
• Some useful commands to work with Postgresql on local:
• By default, Postgresql is already started. If not, use this command to manually start the Postgresql
  pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start
• To turn-off Postgresql manually, use this command pg_ctl -D /usr/local/var/postgres stop -s -m fast
• To access Postgres from command prompt: psql postgres -U kad221
• To stop the access to Postgres from command prompt: quit psql CMD+D
• Follow the instructions to set up and push the spring boot application to Heroku: https://devcenter.heroku.com/articles/deploying-spring-boot-apps-to-heroku
• In Heroku dashboard, select the spring boot application that is deployed.
• Go to Resources, click on the Heroku Postgres, click on settings > View Credentials > Copy URI.
• From command prompt: psql <paste the URI here> and hit enter.
• In application.properties, add spring.datasource.url: <paste URI here>
• From command prompt, run ./mvnw spring-boot:run, and you are good to go with the development.

Search is over to find spring-and-react application build guidelines

It took some time to find this, but found it eventually :)

Building a spring boot application with ReactJS front end: https://github.com/kantega/react-and-spring

Free, free, free ReactJS templates

Isn't it beautiful if you can find some free templates that makes your job simpler to build a ReactJs app?

Here you go: https://colorlib.com/wp/free-react-templates/

Another life saver with the templates: https://bootstrapious.com/p/bootstrap-sidebar (all you got to do is go to demo pages, view source, and customize it to your requirement) %3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22WS%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22849%22%20y%3D%22295%22%20width%3D%2235%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E

Spring Boot + React application

Could this process be easier than this?

https://dzone.com/articles/spring-boot-and-react-happily-ever-after

Webpack made easy :)

Came across this blog and delighted to read the details on how to set up a ReactJs application from scratch. Really awesome, read on: https://www.valentinog.com/blog/babel/

While following the example, use the following in webpack.config.js instead of what was suggested in the blog to resolve the .jsx files:

const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {

    module: {

        rules: [

            {

                test: /\.(js|jsx)$/,

                exclude: /node_modules/,

                resolve: {

                    extensions: [".js", ".jsx"]

                },

                use: {

                    loader: "babel-loader"

                }

            },

            {

                test: /\.html$/,

                use: [

                    {

                        loader: "html-loader"

                    }

                ]

            }

        ]

    },

    plugins: [

        new HtmlWebPackPlugin({

           template: "./src/index.html",

           filename: "./index.html"

        })

    ]

}

And use the following in index.js file (remove the last two lines from Form.js):

import React from 'react'

import ReactDOM from "react-dom"

import Form from "./js/components/Form"

const wrapper = document.getElementById("container")
wrapper ? ReactDOM.render(<Form />, wrapper) : false

Do npm run build and use the main.js file in https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute (use a div with id 'container' in index.html)

Also, remove .babelrc and create babel.config.js under project and add the following content:

module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], };

To add Jest to run the unit tests, do the following steps:

npm i jest babel-jest react-test-renderer --save-dev

npm i enzyme --save-dev

In package.json

"scripts" : {

    "test": "jest"

}

To add SASS/SCSS to this project, check this out: https://medium.com/front-end-weekly/how-to-add-sass-or-scss-to-create-react-app-c303dae4b5bc

Add a ReactJS component in a non-react page

I don't want anything here except to point to these web sites as of now:

https://medium.com/@sevenleaps/using-react-components-in-non-react-websites-12fb7d71b63f

https://stackoverflow.com/questions/43464780/render-a-react-app-in-a-non-react-web-page

https://reactarmory.com/answers/how-to-integrate-react-into-existing-app

A Sample ReactJS & IFrame example

Application: https://reactjs-iframe.herokuapp.com/

Source code: https://github.com/kadirisani/iframes-app.git
(NOTE: Change the iframe url in App.js to reflect your domain)

References:

https://medium.com/@ebakhtarov/handling-of-iframes-in-react-f038be46ac24

https://gist.github.com/pbojinov/8965299

https://github.com/facebook/create-react-app

Testing a ReactJS component

Read this blog: https://semaphoreci.com/community/tutorials/testing-react-components-with-enzyme-and-mocha

ReactJS

What is ReactJS?

Following is the answer that I found when searched the above question on Google:

"React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time."

Links to read more about ReactJS:

https://www.tutorialspoint.com/reactjs/

https://www.codecademy.com

https://egghead.io/courses/getting-started-with-redux

https://css-tricks.com/learning-react-router/

How to access ReactJS libraries?

• Accessing ReactJS library from cdn in the html file is one way. (Refer: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)

• <!DOCTYPE html>
  <html> 
  <head>
  <title>Creating React Component with React.createClass</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  
  <body>
   <div id="app"></div>
   <script type="text/babel">
   var destination = document.getElementById("app");
  
   var App = React.createClass({
     render: function() {
       return (
         <div>
           <h1>Welcome World!!</h1>
         </div>
       )
     }
   });
  
   ReactDOM.render(
     <div>
       <App/>
     </div>, 
     destination
   ); 
   </script>
  </body>
  
  </html>

• Accessing ReactJS related modules from npm and bundle them and provide them to the html file is another way. (Refer: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm)

How to create ReactJS components?

There are two ways to create the ReactJS components.

• Using the traditional way: React.createClass
• Using the ES6 way: extends React.Component

Read more: https://toddmotto.com/react-create-class-versus-component/

Setting up Sublime-Text for React JSX development:

http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/