React renders HTML using ReactDOM.render().
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<h2>Content</h2>
<p>The content text!!!</p>
</div>
);
}
}
export default App;
Root document
The root node is the HTML element where you want to display the result.
ReactDOM.render(
<Providerstore={createStore(allReducers, applyMiddleware(thunk))}>
<React.StrictMode>
<Router>
<Routepath="/"exactcomponent={Home}/>
</Router>
</React.StrictMode>
</Provider>,
document.getElementById('root')
);
<body>
<header id="root"></header>
</body>
function UserWelcome(props) {
return <h1>Welcome back!</h1>;
}
function GuestWelcome(props) {
return <h1>Please sign up.</h1>;
}
class Content extends React.Component {
render() {
if (this.state.isLoggedIn) {
return <UserWelcome />;
}
return <GuestWelcome />;
}
}
export default App;
It’s generally a bad idea to create new functions to pass into props in the render function.
The reason it’s bad to create new functions is for performance: not because functions are expensive to create, but because passing a new function down to a pure component every time it renders means that it will always see “new” props, and therefore always re-render (needlessly).
Avoid creating a new function in render when:
Function components and classes that extend Component are not pure. They will always re-render, even if their props haven’t changed. If a class extends PureComponent instead, though, it is pure and it will skip re-rendering when its props are unchanged. Avoiding needless re-renders is the easiest way to improve performance in a React app.
JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
JSX converts HTML tags into react elements. You are not required to use JSX, but JSX makes it easier to write React applications. JSX is a syntax extension to JavaScript. It may remind you of a template language, but it comes with the full power of JavaScript.
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
Expression in JSX
With JSX you can write expressions inside curly braces { }. The expression can be a React variable, or property, or any other valid JavaScript expression. JSX will execute the expression and return the result.
const element = <h1>React is {5 + 5} times better with JSX</h1>;Inserting a big block of HTML code
const listOfNames = (
<ul>
<li>John</li>
<li>Peter</li>
<li>Charlie</li>
</ul>
);One top element
The HTML code must be wrapped in ONE top level element. So if you like to write two headers, you must put them inside a parent element, like a div element
const listOfNames = (
<div>
<h1>John</h1>
<h1>Peter</h1>
</div>
);Elements must be closed
JSX follows XML rules, and therefore HTML elements must be properly closed. Close empty elements with />
const myelement = <input type="text" />;Don’t put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
const profileImg = <img src={user.imgUrl}></img>;
If a tag is empty, you may close it immediately with />, like XML:
const profileImg = <img src={user.imgUrl}/>;
JSX tags may contain children:
const message = (
<div>
<h1>Hi there!</h1>
<h2>Come have lunch with me.</h2>
</div>
);
Note that everything is converted to a string before being rendered.
React uses ES6’s features such as class, arrow functions, variables(let, var, const), for..in, for..of, and others.
Classes
class User {
constructor(name) {
this.name = name;
}
present() {
return 'Hi my name is ' + this.name;
}
}
class Employee extends User {
constructor(name, age) {
super(name);
this.age = age;
}
show() {
return this.present() + ', I am ' + this.age + ' years old';
}
}
Jimmy = new Employee("Jimmy", 25);
A class can have attributes, methods, and state. You can extend a class and add functionality.
Arrow functions
Regular JS
sayHi = function(name) {
return "Hi! my name is " + name;
}
ES6 arrow function
sayHi = (name) => {
return "Hi! my name is " + name;
}
Default functions
In ES6, a function allows the parameters to be initialized with default values if no values are passed to it or it is undefined.
function add(a, b = 1) {
return a+b;
}
console.log(add(4))
5
console.log(add(4,2))
6
Rest Parameters
You can pass in as many parameters to a method but the values passed must all be of the same type.
function fun1(...params) {
console.log(params.length);
}
fun1();
0
fun1(5);
1
fun1(5, 6, 7);
3
Variables
There are three ways to defined variables with ES6:
a. var(outside of a function) is used as a global variable.
b. var(inside of a function) only belongs to that function.
c. var(inside of a block, like if-statement or for-loop) is still available outside of the block.
d. let is block or function scope.
e. const is used to create variables that don’t change once initialized.
For in
for…in loop is used to loop through an object’s properties
for (variablename in object) {
statement or block to execute
}
var user = {name:"John", age:2, id:1};
for (var attribute in user) {
console.log(user[attribute]);
}
// print out int the order they are organized.
John
2
1
For of
for…of loop is used to iterate iterables like array and map.
let names = ['Folau', 'Lisa', 'Kinga', 'Fusi'];
for (let name of names) {
console.log(name);
}
Folau
Lisa
Kinga
Fusi
August 6, 2019 Install node js on your computer if you haven’t done so. Here is the link.
Create your project by using this command:
npx create-react-app your-app-name For example: npx create-react-app pizza
Go into your app using this command:
cd your-app-name
Start your application using this command:
npm start
Congratulations! You have just set up your react project.
August 6, 2019Thymeleaf is a template language that helps serve static files.
Add dependencies
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
Controller methods
Use Model class to pass data to html files
@Api(value = "home", tags = "HomeController")
@Slf4j
@Controller
public class HomeController {
@GetMapping
public String showHome(Model model, @RequestParam String name) {
log.info("home");
model.addAttribute("name", name);
return "index";
}
}
Static files
HTML files
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Spring Boot Thymeleaf Hello World Example</title>
<!-- CSS only -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">folaukaveinga.org</a>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Spring Boot Web Thymeleaf Example</h1>
<h2>
Hello, <span id="name" th:text="${name}"></span>
</h2>
</div>
</main>
<!-- /.container -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
CSS files
resources/static/css/style.css
#name{
color: blue;
}
Js files
resources/static/js/index.js
$(function() {
$("#sayHiBtn").click(function() {
alert("Hello World!");
});
});