react_faq

Posted on 2020-07-23 Edited on 2023-08-16 In react , tool

Frequent Asked questions about React.

FAQ

Can I use react for part of my page

The answer is Yes, as React use render() which mounts the react element to the Dom node, as the Dom node can be any dom node of the html, so that react be part of the html or whole page if Dom node is the whole body.
Here is how to add react to part of your page

ReactDOM.render(
  <h1>Hello, World</h1>,
  document.getElementById('container_id')
);

What’s Babel

As any language, Javascript also has versions named ECMAScript (short for ES). Currently, most browsers support ES5. ES5 used to be good even though it was painful to code in it. Remember, this not reading from inside callback functions? The new version of Javascript, ES6, also known as ES2015 (specs of the language were finalized in June 2015) makes Javascript great again. If you want to learn about ES6, check out the links at the end of this article. All the great features of ES6 come with one big problem — majority of browsers do not fully support them. That’s when Babel comes to play. Babel is a JS transpiler that converts new JS code into old ones. It is a very flexible tool in terms of transpiling. One can easily add presets such as es2015, es2016, es2017, so that Babel compiles them to ES5.

polyfill

In order to support Promises you must include the Babel polyfill.

Learning JavaScript bundlers

For a number of good technical reasons CommonJS modules (i.e. everything in npm) cannot be used natively in the browser. You need a JavaScript “bundler” to “bundle” these modules into .js files[es6 or old version based on config] that you can include in your web page with a <script> tag.

WebPack
we would like to use that. We would also like to use SASS for our styles, PostCSS for autoprefixing. Plus, we would like to minify and uglify both our CSS and Javascript code. Webpack solves all of these problems using one config file (named webpack.config.js) and one CLI command webpack

Webpack is a modular build tool that has two sets of functionality — Loaders and Plugins. Loaders transform the source code of a module. For example style-loader adds CSS to DOM using style tags. sass-loader compiles SASS files to CSS. babel-loader transpiles JS code given the presets. Plugins are the core of Webpack. They can do things that loaders can’t. For example, there is a plugin called UglifyJS that minifies and uglifies the output of webpack.

Popular js bundlers

wepack
browserify
grunt or gulp

Should I use client side Router for my website

“Single-page applications” are all the rage these days. These are web pages that load once, and when the user clicks on a link or a button, JavaScript running on the page updates the address bar, but the web page is not refreshed(no request send to server). Management of the address bar is done by something called a router.

Use it or not depends on your website

If you’re building a single-page application, use it unless you have a good reason not to.
Don’t use a router if you aren’t building a single-page application.

If you need a router, use react-router in your react application.

Should I use Redux?

React components are arranged in a hierarchy. Most of the time, your data model also follows a hierarchy. In these situations Flux doesn’t buy you much. Sometimes, however, your data model is not hierarchical. When your React components start to receive props that feel extraneous, or you have a small number of components starting to get very complex, then you might want to look into Redux which is used for manage complex state.

You’ll know when you need Redux. If you aren’t sure if you need it, you don’t need it.

Should I use Immutable.js?

Immutable.js provides a set of data structures that can help to solve certain performance issues when building React apps. It’s a great library, and you’ll probably use it a lot in your apps moving forward, but it’s completely unnecessary until you have an appreciation of the performance implications.

Use it when you find your react apps has performance issue. and there is a library for this [immutability-helper](https://github.com/kolodny/immutability-helper)

const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2, c: 3 });
const map2 = map1.set('b', 50); // when you change an attr, a new object is created, but
//the new object shares the unchanged part.
//without immutable js (native js), map2 and map1 points to the same shared memory
map1.get('b') + " vs. " + map2.get('b'); // 2 vs. 50

// it supports List, Map, Stack, OrderedMap, Set, OrderedSet, Record

how to create React APP

Here are rules and steps you should take

Step 1: Break The UI Into A Component Hierarchy
Step 2: Build A Static Version in React(no state at all use static)
Step 3: Identify The minimal (but complete) Representation Of UI State
Step 4: Identify Where Your State Should Live
Step 5: Add Inverse Data Flow

use bootstrap in React

There are two ways to use bootstrap in React, one is use bootstrap css the native way hence more control, the other way is use bootstrap Component which is wrapper of bootstrap native element, easy to use but less control.

bootstrap css

// $ yarn add bootstrap
// add this to index.js so all js can use bootstrap css class
// import 'bootstrap/dist/css/bootstrap.min.css';

// App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    // use bootstrap native component
    <div>
      {'Test button '}<button type="button" class="btn btn-success">Success</button>
    </div>
  );
}

export default App;

bootstrap component

// $ yarn add bootstrap
// $ yarn add react-bootstrap
// add this to index.js so all js can use bootstrap css class
// import 'bootstrap/dist/css/bootstrap.min.css';

//App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Button } from 'react-bootstrap'

function App() {
  return (
    <div>
      {' '}<Button variant="success">Success</Button>
    </div>
  );
}

export default App;

FAQ