{"id":2552,"date":"2018-10-20T09:31:20","date_gmt":"2018-10-20T09:31:20","guid":{"rendered":"https:\/\/tinjurewp.com\/jsblog\/?p=2552"},"modified":"2018-10-20T09:31:20","modified_gmt":"2018-10-20T09:31:20","slug":"learning-reactjs-a-basic-overview","status":"publish","type":"post","link":"https:\/\/learncode.tinjurewp.com\/learning-reactjs-a-basic-overview\/","title":{"rendered":"Learning ReactJs \u2013 A Basic Overview"},"content":{"rendered":"

Note<\/strong>: This post is work-in-progress learning-note and still in active development and updated regularly.<\/p>\n

After React development environment setup, I wanted to dig into React world. React API is known as most popular JavaScript (JS) library to allow developers to build interactive user interfaces for webs.<\/p>\n

Build encapsulated components that manage their own state, then compose them to make complex UIs. React Website<\/a><\/cite><\/p><\/blockquote>\n

Before deep diving into React, I wanted have a quick overview of React’s component-based structure first, just enough to getting started. Main purpose of this introductory learning-note post is to get familiar with basic ReactJs terminology<\/a> with an aim to understand workings of a React component enough to getting started with building basic react applications.<\/p>\n

React DOM – a Virtual DOM<\/a><\/h4>\n

It’s React way to using DOM as a virtual representation of UI “virtual DOM”, which is an abstraction of HTML DOM<\/a>.Updating elements on DOM nodes involves using DOM UI. Frequent update of elements on node tree slows down element rendering on the DOM.<\/p>\n

React gets around this problem using virtual DOM, which is build on the top of the actual DOM. Most events updating in React occur in virtual DOM and utilize minimum use of HTML DOM. Events update from virtual DOM to actual occurs through reconciliation<\/a> and thus achieve faster and efficient implementation.<\/p>\n

Additional Resource: React DOM<\/a><\/p>\n

Elements<\/a><\/h4>\n

React elements are considered the building blocks of ReactJs and are returned using render()<\/code> method to the viewing post (screen). The elements are immutable (can be modified). An example of react element:<\/p>\n

\/\/ react element\nconst element = <h1>Greetings, You are awesome!<\/h1>;<\/code><\/pre>\n
Additional information: Rendering Elements<\/a><\/p>\n
Using JSX<\/h4>\n
React uses JSX<\/a> (JavaScript XML) to\u00a0 describe user interface. Although React recommends using JSX, it is optional and not required<\/a> to use React<\/em>.<\/p>\n
1. Nested Elements in JSX<\/h6>\n
Nested elements should be wrapped inside a container wrapper.<\/p>\n
\/\/ nested wrapper in JSX\n<div>\n    <h1>Hello World!<\/h1>\n    <h2>Welcome to ReactJs app<\/h2>\n    <p>This is nested element use in JSX<\/p>\n<\/div><\/code><\/pre>\n
In the example above, the h1<\/code>, h2<\/code> and p<\/code> elements are wrapped with div<\/code> element.<\/p>\n
Alert<\/strong>: If two JSX elements are used in a component to return<\/em> elements, Babel<\/a> compiler throws error. A return()<\/code> method returns<\/em> only single parent element.<\/p>\n
\/\/ use of nested sibling elements - throws error\nconst MyExample = () => {\n    return (\n       <div> Hello, World!<\/div>\n       <div> Hello, me again!<\/div>\n       )\n}\n\n\/\/babel transpile error\nrepl: Adjacent JSX elements must be wrapped in an enclosing tag (5:7)\n  3 |     return (\n  4 |        <div> Hello, World!<\/div>\n> 5 |        <div> Hello, me again!<\/div>\n    |        ^\n  6 |        )\n  7 | }<\/code><\/pre>\n
When Babel<\/a> transpiles a JSX tag it turns into a function and returns\u00a0 the result of React.createElement()<\/code>. As we know return<\/code> keyword serves as break point, it’s not allowed to have two<\/strong> return<\/code> statements inside a component.<\/p>\n
Return JSX elements inside components must be wrapped within a single parent div<\/code> as shown below:<\/p>\n
\/\/ Babel transpiles WITHOUT error\nconst MyExample = () => {\n    return (\n     <div>\n       <div> Hello, World!<\/div>\n       <div> Hello, me again!<\/div>\n    <\/div>\n       )\n}<\/code><\/pre>\n
Tip<\/strong>: When in doubt using JSX inside render()<\/code> method, wrap all elements inside a single div<\/code> element.<\/p>\n
2. HTML Attributes in JSX<\/strong><\/p>\n
React DOM supports standard or custom DOM attributes<\/a> with or without data-<\/code> prefix attributes. Using the examples from React Documentation<\/a>:<\/p>\n
\/\/example from React Documentation\n<div tabIndex="-1" \/>      \/\/ Just like node.tabIndex DOM API\n<div className="Button" \/> \/\/ Just like node.className DOM API\n<input readOnly={true} \/>  \/\/ Just like node.readOnly DOM API\n\n\/\/use of data attributes\n<div data-foo="42" \/>\n<button aria-label="Close" onClick={onClose} \/><\/code><\/pre>\n
Addition Information: React DOM Elements<\/a><\/p>\n
3. Use of JS Expression in JSX<\/strong><\/p>\n
JS expression can be used in JSX but the expression should be wrapped within { }<\/code> curly brackets.<\/p>\n
\/\/ ES6 syntax\nconst MyExample = () => {\n    let name = "Toyota"\n    return (\n       <h1> I drive {name}<\/h1>\n       )\n}<\/code><\/pre>\n
In the example above, simple JS expression name = "Toyota"<\/code> (line 3) is wrapped with curly braces { }<\/code> in\u00a0 JSX (line 5).<\/p>\n
Addition information: Embedding expression in JSX<\/a><\/p>\n
4. Comments in JSX<\/strong><\/p>\n
HTML comments can’t be used in JSX. The following HTML comment (line 5) throws error.<\/p>\n
\/\/ HTML comments throws error\nrender() {\n  return (\n    <div>\n      <!-- This doesn't work! -->\n       <h1>Hello World!<\/h1>\n    <\/div>\n  )\n}<\/code><\/pre>\n
In JSX regular JS block comments \/* JS block comment *\/<\/code> can be used but they need to be wrapped with curly brackets { }<\/code> as shown below:<\/p>\n
\/\/ single line JSX comment\n{\/* A single line JSX comment *\/}\n\n\/\/Multi-line JSX comments\n{\/* Multi-line comments\n in JSX looks\nlike this example\n*\/}<\/code><\/pre>\n
5. Inline Styling in JSX<\/strong><\/p>\n
Inline style can be added to React App by combining CSS style with JSX as shown in the example below:<\/p>\n
\/* inline styling *\/\nclass HelloWorld extends React.Component{\n   render() {\n    {\/* inline style *\/}\n    var addStyle = {\n         fontSize: 40,\n         fontWeight: bold,\n         color: '#0080ff'\n      }\n\n      return <div>\n        <h1 style = {addStyle}>Hello World!<\/h1>\n        <p>This is simple React Component<\/p>\n        <\/div>\n      }\n}<\/code><\/pre>\n
The <strong>camelCase<\/strong><\/code> naming convention is used in CSS syntax, px<\/code> value will be automatically added by React after appropriate value in an element. In the above example addStyle<\/code> (lines: 5-9) is used to inline styling of h1<\/code> element (line 12).<\/p>\n
Note: To quote from the React Documentation<\/a>: “Since JSX is JavaScript, identifiers such as class<\/b> and for<\/b> are discouraged as XML attribute names. Instead, React DOM components expect DOM property names such as className<\/b> and htmlFor<\/b>, respectively”.<\/p>\n
Additional information: DOM Elements<\/a><\/p>\n
Components<\/a><\/h4>\n
In React World, everything is component which are essentially JS functions and Classes. To quote from React Document<\/a> “React components are small, reusable pieces of code that return a React element to be rendered to the page<\/em>“.<\/p>\n
Its a general convention to start first<\/em> letter of component names with capital letter. React components can be group into Functional and Class components<\/a>.<\/p>\n
1. Functional component<\/a><\/h6>\n
The functional components is the classic JS function which accepts single property (referred as “props<\/em>” in react) object argument with some data and returns JSX element.<\/p>\n
\/\/functional component\nconst Greeting = () => { \n    return <h1>Greeting, You look awesome!<\/h1>;\n}\n\n\/\/ stateless component\nfunction Welcome(props) {\n  return <h1>Hello, {props.name}<\/h1>;\n}<\/code><\/pre>\n
Functional components are referred as “stateless<\/em><\/strong>” component because they lack state & life cycle methods<\/a> is not aware of any of its own state. Its main purpose to receive data and present as JSX. Their main objective is “presentational<\/em>“, i.e.<\/em> to alter the UI.<\/p>\n
The stateless components are simple, easy to write & understand and recommended to use when there is no need to use state or life cycle methods. They are suitable to build presentational components.<\/p>\n
2. Class Components<\/a><\/h6>\n
React class components, unlike functional components, are aware of its state such as user responses (clicking a button or entering data etc).<\/p>\n
Class-based components are basically JS classes and which extends React.component<\/code> and uses render()<\/code> method (a required method) to return JSX.<\/p>\n
\/\/ using class component\nclass Greeting extends React.Component {\n  render(){\n    return <h1>Greeting, You are awesome!<\/h1>;\n  }\n}\n\n\/\/ ES6 Classes component\nclass Welcome extends React.Component {\n  render() {\n    return <h1>Hello, {this.props.name}<\/h1>;\n  }\n}<\/code><\/pre>\n
In the example above, the\u00a0 return statements (lines: 4 & 11) are in one line and thus does not require a parentheses. In react world, the above two methods are equivalent.<\/p>\n
Class-based components are referred as “stateful<\/em><\/strong>” because they contain additional state & life cycle methods<\/a>. In a typical class-based component, its state consists of class constructor<\/a> method, <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes#Super_class_calls_with_super" target="_blank" rel="noopener">super<\/a><\/code> class inside the <a href="https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes#Constructor" target="_blank" rel="noopener">constructor<\/a><\/code> method.<\/p>\n
An example of class-based component from React Guide<\/a>:<\/p>\n
\/\/example from React guide\nclass Clock extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {date: new Date()};\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Hello, world!<\/h1>\n        <h2>It is {this.state.date.toLocaleTimeString()}.<\/h2>\n      <\/div>\n    );\n  }\n}<\/code><\/pre>\n
A class-based component has state, life cycle methods, and\u00a0 every time React renders it creates an instance of a class component.<\/p>\n
Additional Information: Components and props<\/a> & Should this Component have state?<\/a><\/p>\n
More detail discussion on rendering a component<\/a>, working example of a component<\/a>, and extracting a component<\/a> will be discussed separately.<\/p>\n
Props<\/a> and State<\/a><\/h4>\n
The React document<\/a> describes <strong>props<\/strong><\/code> as ” inputs to a React component. They are data passed down from a parent component to a child component<\/em>.”<\/p>\n
Props<\/h6>\n
Props are immutable (read-only) object properties of component (functional or a class) which are displayed in DOM with render() method in JSX element.<\/p>\n
Props<\/em> are passed from from one component to another, say from parent components to child component (one directional flow from top to down). Example of props<\/em> data include data, callback function.<\/p>\n
Once received by components they must never be modified or changed. The following example snippets adapted from the React<\/a>:<\/p>\n
\/\/function component\nfunction add(x, y) {\n  return x + y;\n}\n\/\/mutable (impure) function\nfunction substract(account, amount) {\n  account.total -= amount;\n}<\/code><\/pre>\n
In the example above, the return value of add()<\/code> function always remains the same for the same inputs and thus also called “pure<\/em>” function. However, in the substract()<\/code> function (lines: 6-8), the value of account.total<\/code> changes. The props in React components must operate as pure (immutable) functions.<\/p>\n
State<\/h6>\n
To quote from the React document, “state is similar to props, but it is private and fully controlled by the component<\/em>“.<\/p>\n
The state<\/em> object properties in React components are mutable, which means that state property value in response to user input or other responses.<\/p>\n
State is always a part of a React component (internal data of a class) and any data belonging the state effect only the components below. This process is commonly referred as “top-down<\/em>” or “unidirectional<\/em>” data flow.<\/p>\n
By default, React component has no state. The following example (used in earlier section) is stateless component:<\/p>\n
\/\/stateless component\nfunction Welcome(props) {\n  return <h1>Hello, {props.name}<\/h1>;\n}<\/code><\/pre>\n
If any React App such as clicking a button, or to do list etc needs to keep track of user responses then a state can be created to update and keep track of events.<\/p>\n
An use case example<\/strong> of how state in React component ticking clock<\/em> from React guide<\/a> is available in CodePen<\/a>.<\/p>\n
Additional Information: State and Lifecycle<\/a>,\u00a0 and ReactJS: Props vs. State<\/a><\/p>\n
Difference between Props and State<\/h6>\n
The difference between Props and State summarized in the following table is adapted from Props vs State<\/a> from React Guide GitHub pages.<\/p>\n\n\n\n\n\n\n\n\n\n\n
Description<\/th>\nProps<\/th>\nState<\/th>\n<\/tr>\n<\/thead>\n
Can get initial value from parent Component?<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
Can be changed by parent Component?<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n
Can set default values inside Component?*<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
Can change inside Component?<\/td>\nNo<\/td>\nYes<\/td>\n<\/tr>\n
Can set initial value for child Components?<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
Can change in child Components?<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Other React Terminology<\/h4>\n
The other React terminology like Life Cycle methods<\/a>, Controlled vs controlled components<\/a>, Keys<\/a>, Refs<\/a>, Events<\/a> & Reconciliation<\/a> will be discussed separately.<\/p>\n
Starting to Thinking in React Way!<\/h5>\n
In an effort to start learning React by building react components, it’s time to start thinking in React way<\/a> by building simple applications and learn step by step to build more complex applications.<\/p>\n
Wrapping Up<\/h5>\n
In this learning-note post, basic React terminology and an overview of these concepts were briefly discussed. The next step to start using these concepts to build a simple React applications.<\/p>\n
NEXT: Learning to Work With React Components<\/p>\n
Useful Resources and Links<\/h5>\n
While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.<\/p>\n