====== React ======
--- //[[colm.carew@errigal.com|Colm Carew]] 2017/08/11 03:30//
===== What is React? =====
React is essentially a JavaScript library - note it is not a Framework. It was created and is maintained by Facebook.
If you don't have node or npm installed locally please install the latest official LTS from : https://nodejs.org/en/
For React's purposes, node essentially works via adding dependencies in a package.json file. To add a new dependency to the project run 'npm install --save PACKAGE_YOU_WANT'.
To have react running and listening for changes run 'npm start' in the same place the package.json and webpack.config.js are.
It is used for developing Fast + Responsive UIs and only really cares about the view layer of the Application.
React works via a Component hierarchy. Each component has a render method which returns some JSX.
JSX is an XML/HTML like syntax which in the case or React allows the dev to create their own tags.
The advantage of everything being a component is that each component can have its own functionality and be refreshed easily without needing to refreshing the whole page.
React is split into separate files when developing but when you compile the project it will compile into a single bundle.js file that is referenced in the html file that you want your react app. Note it works by replacing a div element usually with an id of 'root'.
The very nice feature of React is what is called the Virtual DOM. Something you should never have to worry about or code for.
The virtual DOM is basically a copy of the DOM (current webpage) in memory.
When a react component rerenders or changes, the virtual DOM then gets updated.
React then compares the Virtual DOM to the Real DOM and updates the Real DOM where necessary, thus making changes fast and making the page very dynamic.
===== Why use React? =====
From my own experience, the main reason I would use React is that it is very fast to get UIs up and running and since you are writing JavaScript you really have full control
over what is going on in the webpage and browser.
And a big one from the Developer side is that once you get used to it it is very enjoyable and powerful to code in
===== Is It Easy to Setup? =====
For a solo Frontend App but itself using the create-react-app tool, yes it is utterly simple to bootstrap a project.
(If you want to create a Solo React Project (which is good for understand React itself before tying it to anything else) I suggest using the create-react-app tool which you can obtain from here : https://github.com/facebookincubator/create-react-app . The readme has instructions on how to set it up, it is very simple - remember you will need node installed for this so pull the latest LTS version : https://nodejs.org/en/)
For making it work inside another project it is not so easy, there are a good few steps to follow.
However I have written a tutorial on how to get React (or anything that runs through Webpack really) running with Gradle : [[toolsandtechnologies:reactWithGradle| How to Add React to a Gradle Project (Grails, Sprint Boot, etc.)]]
Feel free to look at our projects like 'fiber' and 'content-distributor' which use React, so if you have any issues setting up, please reference them as the obviously have
a working configuration in those projects.
Note this only covered React and did not look into Redux - for React and Redux click [[development:applications:reactjsredux|React and Redux]]
===== Examples =====
For a react tutorial please see : https://www.youtube.com/watch?v=MhkGQAoc7bc and https://facebook.github.io/react/tutorial/tutorial.html
In our projects we usually keep the frontend and the backend in the same app which has its benefits and drawbacks.
The React Code is usually in src/main/webapp of the project.
You can have the react side auto recompile by using 'npm start' in the root of the project.
The structure should look like : {{ :development:applications:screenshot_2017-08-11_12.01.20.png |}}
Look at your webpack.config.js to see where the bundle.js file goes so your html file can reference it.
Ensure your html file looks like :
Page Title
the actions and reducers folders as well as the store.js file are related to Redux so we won't worry about that yet.
Let's focus on the index.js and the components folder.
==== index.js ====
The index.js will usually look something like :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
,
document.getElementById('root')
);
**Note this is using es6 so it uses import rather than require.
If we step through what it is doing is it imports the react and react dom dependencies (both necessary) for doing any react magic + syntax. The App import is your component where your app comes together. index.css is just a styling file and is not necessary.
If we look at the render part of the app it is rendering the App component to the root element. It essentially injects the App component into whatever the root element is.
From here on out you can call your components whatever you want but since it is App.js in the example see below for an example App.js file
==== App.js ====
import React, {Component} from 'react';
class App extends Component {
render() {
return (
Welcome to the Example
);
}
}
export default App;
As you can see this App.js is just going to render a h1, nothing amazing, but say we have a component called welcome.js instead
import React, {Component} from 'react';
class Welcome extends Component {
render() {
return (
Welcome to the Example
);
}
}
export default Welcome;
Assuming welcome is in a different package we could then write the App.js like
import React, {Component} from 'react';
import Welcome from './greetings/welcome.js';
class App extends Component {
render() {
return (
);
}
}
export default App;
As you can see we have now created our own tag called Welcome. Just a point to note here, a render method can only return 1 element tag. that element tag can have as many children as you want but only one can be returns for instance you might have your app look like this :
import React, {Component} from 'react';
import Welcome from './greetings/welcome.js';
import Gooddbye from './greetings/goodbye.js';
class App extends Component {
render() {
return (
);
}
}
export default App;
Note the surrounding parent div.
Now lets look at something with a bit more functionality
==== Welcome.js - With some functionality ====
There are a few methods you can override in a React Component, I won't go through them all but the main ones I usually consider are constructor() and componentDidMount(). constructor is called when the component is creating so is used for setting up the state of the component. The state of the component is what is used to rerender the component. The componentDidMount is called right after the component is created so if you were doing and REST or ajax calls I recommend doing them here and setting the state with the results.
import React, {Component} from 'react';
class Welcome extends Component {
constructor(){
super();
this.state = {
count : 1
};
}
componentDidMount(){
this.incresaseCounter();
}
incresaseCounter() {
let counter = this.state.count;
counter++;
this.setState({
count : counter
});
}
render() {
return (
Count : {this.state.count}
);
}
}
export default Welcome;
Right now there is quite a lot going on here. The App doesn't really do anything amazing but this example proves a lot of concepts.
Lets break it down :
constructor(){
super();
this.state = {
count : 1
};
}
The constructor here says called the parent constructor of the Component in the react library, then give this component a state where it has a count of 1.
componentDidMount(){
this.incresaseCounter();
}
Once mounted called the increate counter function. Note that when the page loads it will be so fast loading the counter will say 2 as React is quite fast for loading and making changes, especially something basic like this.
incresaseCounter() {
let counter = this.state.count;
counter++;
this.setState({
count : counter
});
}
Unlike every other function in the Welcome Component, incresaseCounter is not a default component function so it is not overriding anything we are just creating a function.
What is going on here is that a counter variable is being assigned the value of what is currently in the state. The counter is then incremented by 1. The state is then set so the new counter value is in place. Note it is this .setState method that is causing the rerender.
render() {
return (
Count : {this.state.count}
);
}
Finally we have the render method. Note it is returning a single div.
As can be seen the h2 is utilising {} which when used in JSX means find the value of/execute this.
The two things to note about the button tag are the use of className rather than class. Class is a keyword with React/es6 so className should be used to reference styling.
The other thing is the onClick which as you can see points to the incresaseCounter. Since the incresaseCounter funtion will be called as an anonymous function you will need to bind 'this' to it so that when the function is ran via the button, it has proper access to the this you are referring to.
The App should look something like :
{{ :development:applications:screenshot_2017-08-11_12.30.52.png |}}
This has been basic but you can add styling and there are many React packages such as React-Bootstrap for making stuff pretty or you can even just import the Bootstrap css in the html file and write the Bootstrap components as you normal would in HTML inside the JSX.
As a final JavaScript Note remember that ; are use to terminate lines. They are not necessary but if you want to minify your js files then they are necessary.
===== Solution =====
For a sample solution please go to : Dropbox/Errigal Shared Documents/Training/react-basic-starter.zip