SHAREPOINT FRAMEWORK - REACT JS alert on Page Load

Here is my code for getting alert on page load.

componentDidMount() {   
  alert("Hi");
}



public render(): React.ReactElement<IReactCrudProps> {   
    return ( 
        <select id="myDDl">

        </select>
    );
} 

Drop down selection change event in React Js in SPFX webpart

import * as React from 'react'; 

import styles from './Reactspfx.module.scss'; 

import { IReactspfxProps } from './IReactspfxProps'; 

import { escape } from '@microsoft/sp-lodash-subset'; 

export interface IReactGetItemsState

{ selectValue:string }

 export default class Reactspfx extends React.Component { 

public constructor(props: IReactspfxProps) {

 super(props); 

this.state = { 

selectValue:"Radish"

 };

}

handleChange = (event) => { this.setState({selectValue:event.target.value}); alert(event.target.value); };

public render(): React.ReactElement { alert(this.state.selectValue); return (

  <select value={this.state.selectValue}  onChange={this.handleChange}>
    <option value="Orange">Orange</option>
      <option value="Radish">Radish</option>
      <option value="Cherry">Cherry</option>
    </select>
);

}

8 Ways to Style React Components in spfx webpart

There seems to be about eight different ways of styling React JS components used widely in the industry for production level work:

• Inline CSS
• Normal CSS
• CSS in JS
• Styled Components
• CSS Modules
• Sass & SCSS
• Less
• Stylable

For each method, I’ll look at the need for dependencies, the difficulty level, and whether or not the approach is really a good one or not.

1-Inline CSS

• Dependencies: None
• Difficulty: Easy
• Approach: Worst

I don’t think anyone needs an introduction to inline CSS. This is the CSS styling sent to the element directly using the HTML or JSX. You can include a JavaScript object for CSS in React components. There are a few restrictions like replacing every - with camelCase text. You can style them in two ways using JavaScript objects as shown in the example.

Example

import React from "react";

const spanStyles = {
  color: "#fff",
  borderColor: "#00f"
};

const Button = props => (
  <button style={{
        color: "#fff",
  borderColor: "#00f"
    }}>
    <span style={spanStyles}>Button Name</span>
  </button>
);

2-Regular CSS

• Dependencies: None
• Difficulty: Easy
• Approach: Okay

Regular CSS is a common approach, arguably one step better than inline CSS. The styles can be imported to any number of pages and elements unlike inline CSS, which is applied directly to the particular element. Normal CSS has several advantages, such as decreasing the file size with a clean code structure.

You can maintain any number of style sheets, and it can be easier to change or customize styles when needed. But regular CSS might be a major problem if you’re working on a bigger project with lots of people involved, especially without an agreed pattern to do styling in CSS.

Example

a:link {
  color: gray;
}
a:visited {
  color: green;
}
a:hover {
  color: rebeccapurple;
}
a:active {
  color: teal;
}

3-CSS in JS

• Dependencies: jss, jss-preset-default, jss-cli
• Difficulty: Easy
• Approach: Decent

CSS in JS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, on the server side or at build time in Node. It uses JavaScript as a language to describe styles in a declarative and maintainable way. It’s a high performance JS-to-CSS compiler which works at runtime and server-side. When thinking in components, you no longer have to maintain a bunch of style sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).

Example

import React from "react";
import injectSheet from "react-jss";

// Create your Styles. Remember, since React-JSS uses the default preset,
// most plugins are available without further configuration needed.
const styles = {
  myButton: {
    color: "green",
    margin: {
      // jss-expand gives more readable syntax
      top: 5, // jss-default-unit makes this 5px
      right: 0,
      bottom: 0,
      left: "1rem"
    },
    "& span": {
      // jss-nested applies this to a child span
      fontWeight: "bold" // jss-camel-case turns this into 'font-weight'
    }
  },
  myLabel: {
    fontStyle: "italic"
  }
};

const Button = ({ classes, children }) => (
  <button className={classes.myButton}>
    <span className={classes.myLabel}>{children}</span>
  </button>
);

// Finally, inject the stylesheet into the component.
const StyledButton = injectSheet(styles)(Button);

.

4-Styled Components

• Dependencies: styled-components
• Difficulty: Medium
• Approach: Decent

Styled-components is an example of the above-mentioned CSS in JS. It basically gives us CSS with other properties you wish we had in CSS like nesting. It also allows us to style the CSS under the variable created in JavaScript. You could normally create a React component along with the styles attached to it without having to create a separate file for CSS. Styled-components allows us to create custom reusable components which can be less of a hassle to maintain. Props can be used in styling the components in the same way it is passed in the React components. Props are used instead of classes in CSS and set the properties dynamically.

Example

import React from "react";
import styled, { css } from "styled-components";

const Button = styled.button`
  cursor: pointer;
  background: transparent;
  font-size: 16px;
  border-radius: 3px;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
  transition: 0.5s all ease-out;
  ${props =>
    props.primary &&
    css`
      background-color: white;
      color: green;
      border-color: green;
    `};
`;

export default Button;

5- CSS Modules

• Dependencies: css-loader
• Difficulty: Tough (Uses Loader Configuration)
• Approach: Better

If you’ve ever felt like the CSS global scope problem takes up most of your time when you have to find what a particular style does, or if you’ve had to write a CSS file without organizing it properly to make the code work first, or if getting rid of the files gives you a slight nudge in your heart wondering if you might break the whole code, I feel you. CSS Modules make sure that all of the styles for a component are at one single place and apply to that particular component. This certainly solves the global scope problem of CSS. The composition feature acts as a weapon to represent shared styles between the states. It’s similar to the mixin in Sass, making it possible to combine multiple groups of styles.

Example

import React from "react";
import style from "./panel.css";

const Panel = () => (
  <div className={style.panelDefault}>
    <div className={style.panelBody}>A Basic Panel</div>
  </div>
);

export default Panel;

.panelDefault {
  border-color: #ddd;
}
.panelBody {
  padding: 15px;
}

6-Sass & SCSS:

• Dependencies: node-sass
• Difficulty: Easy
• Approach: Best

Sass claims that it’s the most mature, stable, and powerful professional grade CSS extension language in the world. It’s a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as “syntactic sugar”) into regular CSS. The aim is to make the coding process simpler and more efficient. Just like other programming languages, Sass allows the use of variables, nesting, partials, imports and functions, which add super powers to regular CSS.

Example

$font-stack:    'Open Sans', sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

7-Less

• Dependencies: less, less-loader
• Difficulty: Easy
• Approach: Good

Less (Leaner Style Sheets) is a open-source, dynamic preprocessor style sheet language that can be compiled into CSS and run on the client side or server side. It takes inspiration from both CSS and Sass and is similar to SCSS. A few notable differences include variables starting with an @ sign in Less and with a $ in Sass.

Example

@pale-green-color: #4D926F;

#header {
  color: @pale-green-color;
}
h2 {
  color: @pale-green-color;
}

8-Stylable

• Dependencies: @stylable/core, @stylable/runtime, @stylable/optimizer, @stylable/module-utils, @stylable/custom-valu
• Difficulty: Difficult
• Approach: Better

Stylable is another pre-processor joining Sass, SCSS, and Less. If there is a struggle in getting handy with styled components — as their syntax is slightly different from Normal CSS — this comes to the rescue. Stylable is just like CSS but offers more opportunities to make each component discreet. This can do what CSS Modules finds it harder to do, which is styling the internal parts of a UI. Along with the other properties of CSS, Stylable also offers custom pseudo classes and pseudo elements. This property of Stylable automatically allows us to create custom CSS classes, which enables us to do the styling to internal parts of the components.Example

@namespace "Page";
:import {
    -st-from: './video-player.st.css';
    -st-default: VideoPlayer;
}
.mainVideo {
    -st-extends: VideoPlayer; /* define mainVideo as VideoPlayer */
}
.mainVideo::playButton { /* override mainVideo playButton */
    background: green;
    color: purple;
}

/* CSS output*/
.Page__mainVideo.VideoPlayer__root {}
.Page__mainVideo.VideoPlayer__root .VideoPlayer__playButton {
    background: green;
    color: purple;
}

Using SCSS with React JS

With the upgraded Create React App released recently, we got a lot of new tools to play with. Sass is one that I’m excited to have built in, since we used to have .scss files compile and write to .css files right in our folder structure. You may be concerned about using Sass in React. Isn’t it a smarter way to write styles with CSS-in-JS libraries like styled-components or aphrodite? I believe that adding Sass support to Create React App will be a big help to beginners of React. How do I use Sass in React is one of the questions I always hear from people getting into React. With the React 16.6 additions like React.memo() and the React 16.7 functional additions like hooks, starting with React will be easier than ever!

1. Install the Starter App using Create React App
   Let’s start by installing the starter app. You can do that by running npm install -g create-react-app globally or using npx create-react-app to install and invoke it immediately so your installed package won’t be anywhere in your globals. Check out more about npx.
2. Install node-sass dependency
   Let’s run npm install node-sass to install node-sass to help in compiling your scss to css.
3. That’s it — we’re done. We can test the configuration by changing our index.css file to index.scss file and trying out some cool Sass / SCSS features.

Common Examples

Here’s a way to use variables in SCSS:

$blue: #004BB4;
$ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
$nunito-font: 'Nunito', 'Arial', 'Helvetica', sans-serif;

Once you’ve created the variables, you can use them wherever you need to, like this:

h1 {
  font: $ubuntu-font;
  color: $blue;
}
a {
  font: $nunito-font;
  background-color: $blue;
  padding: 6px;
}

When you compile your SCSS files, the Sass compiler will take care of the variables you have used in your source file, replacing the variable name with its stored value. And changing the value of the color is as quick as updating the variable content and re-compiling. Gone are the days of using “Find and Replace” in your favorite text editor to change colors in your CSS file.

A worthwhile feature that I covered previously is the “nesting” feature of SCSS. An example of that can be demonstrated here:

<ul class="navbar">
  <li><a href="">Item <span>1</span></a></li>
  <li><a href="">Item <span>2</span></a></li>
  <li><a href="">Item <span>3</span></a></li>
  <li><a href="">Item <span>4</span></a></li>
  <li><a href="">Item <span>5</span></a></li>
</ul>

.navbar {
  font: $ubuntu-font;
  color: $blue;
  li {
    margin-left: 1rem;
    a {
      padding: 5px;
      font-size: 1.5rem;
      span {
        font-weight: 600;
      }
    }
  }
}

However, be aware that nesting too deeply is not good practice. The deeper you nest, the more verbose the Sass file becomes and the larger the compiled CSS will potentially be, since the nesting is flattened when compiled. So, overuse of nesting can create overly specific CSS rules that are hard to maintain. There’s a chance that the selectors can’t be reused, and there are performance issues too. Nested selectors will create a long CSS selector string that will end up generating a bigger CSS file.

Wrapping Up

CSS pre-processors are here to stay. They extend the basic CSS features by providing you with a set of powerful functionalities that will raise your productivity right away. We mentioned a few benefits but there are many more, like inheritance, functions, control directives, and expressions like if(), for() or while(), data types, interpolation, etc. Becoming a Sass guru may take a bit of time — all you need to do is look into the Bootstrap Sass files to see how Sass could turn into a complex thing. But learning the basics and setting it up for your project won’t take you long.

References:https://www.sitepoint.com/react-components-styling-options/