Making of a component library for React – Hacker Noon

Making of a component library for React  #reactjs

  • For this library, this is what I had at the end: – assets/ — Skip this folder, this is just for images I had in API docsbuild/ — UMD and ES module build files + sourcemaps.examples/ — This folder contains test .
  • PopupMenu header partAs we build components for UI we include style files, rollup allows us to make bundles with styles and images the same way as webpack does.
  • import React, {Component} from ‘react’;In my case I even need to use React to provide context to child components this old way: (old because recently React introduced new Context API).
  • I have PopupTable that takes popupWidth of the parent PopupMenu – React context in PopupMenu classI would like to also highlight classnames npm module that does pretty good job in combining multiple classes from CSS modules: – classnames module exampleUsage: – Unit testingFirst you need to decide which unit-testing framework you…
  • Example: – // Jest Snapshot v1, should render correctly 1`] = ` – div – div – onMouseOut={[Function]} – onMouseOver={[Function]} – / – div – onMouseOut={[Function]} – onMouseOver={[Function]} – style={ – Object { – “height”: “auto”, – “left”: “calc(-100px + 50%)”, – “visibility”: “hidden”, – “width”: “calc(200px – 10px)”, -…

Some time ago I decided to make an article that covers topics like publishing to NPM, API architecture. Best tutorial for this would be a react component library development. A good example of React…
Continue reading “Making of a component library for React – Hacker Noon”

Making ReactJS Realtime With Websockets

Making #ReactJS Realtime With #Websockets

  • Installation – Now, install create-react-app and also scaffold a new React app with the following commands: – npm install -g create-react-app – – create-react-app react-pusher – – Once all the necessary files are installed, change directory into react-“pusher and start the application with: – npm start – – By now,…
  • There are number of dependencies required for the application server, so let’s install them immediately: – npm install –save axios body-parser cors express pusher pusher-js – – To configure the entry point of the application, create a file called server.js and paste the code below into it: – const Pusher…
  • /ChatBox.css’; – export default ({ text, username, handleTextChange }) = ( – div – div className=”row” – div className=”col-xs-12″ – div className=”chat” – div className=”col-xs-5 col-xs-offset-3″ – input – type=”text” – value={text} – placeholder=”chat here…” – className=”form-control” – onChange={handleTextChange} – onKeyDown={handleTextChange} – / – /div – div className=”clearfix”/div – /div…
  • /avatar.png”; – export default ({ chats }) = ( – ul – {chats.map(chat = { – return ( – div – div className=”row show-grid” – div className=”col-xs-12″ – – div className=”chatMessage” – div key={chat.id} className=”box” – p – strong{chat.username}/strong – /p – p{chat.message}/p – /div – div className=”imageHolder” – img…
  • The state variables in the app are created and defined in the constructor like this: – … – class App extends Component { – constructor(props) { – super(props); – this.state = { – text: ”, – username: ”, – chats: [] – }; – } – componentDidMount() { – ……

This quick tutorial will lead you through building a basic, realtime group chat app, similar to our demo here…
Continue reading “Making ReactJS Realtime With Websockets”