Tutorial Site reject

Component Lifecycles

Anonymous (anonymous@undisclosed.example.com) — 2020-07-21T10:39:51+00:00

Component Lifecycles The component life cycles graph done in this site, , and it is perfect. Here is the image I capture from this site. You should go there to see the newest version. Here is current version 16.4. Life Cycle Functions * constructor(props)

Components Functional VS Class-based

Anonymous (anonymous@undisclosed.example.com) — 2020-07-09T15:44:11+00:00

Components Functional VS Class-based When creating component, we usually create a sub directory for that component. The following components are doing the same thing. Functional Components are sometime called dumb component. They are simple and do not maintain it own state, and usually controller by

Connect to Server - AXIOS JS

Anonymous (anonymous@undisclosed.example.com) — 2020-09-14T11:16:44+00:00

Connect to Server - AXIOS JS AXIOS is a Promise based HTTP client. It is not a part of the React.js library, but it can be used with react. Install Do the following if you react project directory. npm install axios if you want to download the library into your repository, add

Create a Project

Anonymous (anonymous@undisclosed.example.com) — 2020-01-06T11:15:07+00:00

Create a Project After install npx, use the following code. my-app would be the name of your project. This process is going to take sometime (in term of minutes, mine was 10+ minutes for the first time). Once the project is created, we can start it by

Deploy on WebLogic

Anonymous (anonymous@undisclosed.example.com) — 2021-02-05T16:04:38+00:00

Deploy on WebLogic You need to create 3 files, and they are web.xml, pom.xml, weblogic.xml(optional) in your existing react project. we put all file in the root directory of the react project. weblogic.xml Mainly to tell which version of WebLogic we are using, and the context-root of the project. If you are cool with the context-root as your war file name, you can skip this part.

Dynamic className

Anonymous (anonymous@undisclosed.example.com) — 2020-07-14T10:35:32+00:00

Dynamic className Another way to do dynamic styling is through changing the class name directly. Here is how we change the className of a div (with className={myDivClasses}) dynamically based on prop.index. After all, className is just a string with names that spereated by a space.

Dynamic Inline Styling

Anonymous (anonymous@undisclosed.example.com) — 2020-07-14T10:13:48+00:00

Dynamic Inline Styling It is possible that we dynamically change the CSS with inline styling. As we know that the styling is just an JavaScript object, we can change it before we render it. Here is a dumb example that change style.cursor = “pointer

Flexbox (CSS)

Anonymous (anonymous@undisclosed.example.com) — 2020-10-27T09:56:47+00:00

Flexbox (CSS) Flexbox is a css layout module, basically used by a lot of page in these days. Material UI use it, so we kind of mention it here. To learn it from the documentation, go here: To learn it from playing a game, go here: justify-content

Grid

Anonymous (anonymous@undisclosed.example.com) — 2020-10-27T09:57:27+00:00

Grid In material UI, grid uses for laying out component in order like the grid system in Bootstrap. For details, go here: Grid can be a container, or item , or both, and each grid has 12 equally divided columns on the screen. If the next grid did not fit on the 12-column row, it will start a new row like the example shown below.

Importing CSS file

Anonymous (anonymous@undisclosed.example.com) — 2020-07-13T17:09:11+00:00

Importing CSS file React using sudo DOM, and we can apply css style to each component independently. Usually, we put the css file and the component in the same sub directory. Assume we want to do something like above. here is our ItemComponent.css

Inline style

Anonymous (anonymous@undisclosed.example.com) — 2020-07-14T09:52:34+00:00

Inline style The basic idea is to setup a JavaScript object either with let or const, and then apply it inside the tag with style={...}. It is import to note that we are using sudo DOM, and the style property names are changed from kebab-case (using hyphen-separated) to

Install

Anonymous (anonymous@undisclosed.example.com) — 2020-10-27T08:56:47+00:00

Install It is easy. Once npm is installed, do the following in your project: npm install @material-ui/core To use the Material UI component in your project/component, simple import them like: import {Paper, Grid, Typography} from "@material-ui/core";

JavaScript Arrow Function

Anonymous (anonymous@undisclosed.example.com) — 2020-09-03T10:22:32+00:00

JavaScript Arrow Function Arrow function is used a lot in React.js. Here we copy the syntax from mozilla MDN for quick reference only. If you are looking for actual example, go there to take a look. (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // equivalent to: => { return expression; } // Parentheses are optional when there's only one parameter name: (sin…

Passing Value, Reference Between Components

Anonymous (anonymous@undisclosed.example.com) — 2020-07-10T16:15:54+00:00

Passing Value, Reference Between Components In this example, we will show how to pass value, reference between components. We will have an outter container component MyContainer, and within that component we will have 3 inner components InnerComponent

prop-types, For Type Checking

Anonymous (anonymous@undisclosed.example.com) — 2020-01-22T12:18:39+00:00

prop-types, For Type Checking prop-types helps us to type check the incoming props for a class in React. If the incoming type does not match with the setting, the code will still run, but a warning message will show up in the JavaScript console like:

props

Anonymous (anonymous@undisclosed.example.com) — 2020-01-06T14:59:34+00:00

props props can actually be any name you like, but by convention, people usually use the word props. props is a way that the parent component pass values to a child component. let's assume we have a child component like this: import React from 'react'; const person = (props) => { return (

I am a {props.name}, and I am {props.age} years old

{props.children}

) } export default person

Redux

Anonymous (anonymous@undisclosed.example.com) — 2021-09-29T17:17:32+00:00

Redux * Install redux, react-redux, and update the react-dom * Create a reducer for storing the state, and handle the dispatched task * Create the store in index.js, and provide it to the app by * Using redux in your component:

Route

Anonymous (anonymous@undisclosed.example.com) — 2020-09-22T12:28:37+00:00

Route This is what make a single page app do not refresh. Quick Start It is a big topic, and here I want to make it as quick as possible to read. * Install react-router, react-router-dom to your project by npm install --save react-router react-router-dom

state

Anonymous (anonymous@undisclosed.example.com) — 2020-07-10T15:04:17+00:00

state state can be used in both component base and functional base class with different methods. Component-based Object state is a special variable that represent the state of a Component. Any class that extends Component from 'react' can have this. Usually the state variable contains a map of variables. React will monitor it, and if it is changed, the view using the variables in state will also be updated.

Using List

Anonymous (anonymous@undisclosed.example.com) — 2020-07-13T16:27:04+00:00

Using List We are going to create something like this: By clicking the add button, it will add an item into the list, and by clicking the item itself, it will be removed. We will have a contain class component MyContainer that keep the list and state, and item functional component

Using props, state, and Binding

Anonymous (anonymous@undisclosed.example.com) — 2020-01-07T09:11:07+00:00

Using props, state, and Binding Ouptut App.js One thing to notice is we have use event.target.value inside one of the call back function the UserInput component. import React, { Component } from 'react'; import './App.css'; import UserInput from './UserInput/UserInput' import UserOutput from './UserOutput/UserOutput' import "./UserOutput/UserOutput.css" class App extends Component { state = { usernames: [ { name: "name1" }, { name: "name2" } ] } onButtonClicked…

What is JSX

Anonymous (anonymous@undisclosed.example.com) — 2020-07-10T11:33:01+00:00

What is JSX Do not let the name fool you. It is basically JSX is a HTML-like language for React component to return it UI. It is a syntactic sugar for React.createElement(). The following React functional component return a JSX within the (). One thing to note that for