npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-nucleus

v1.1.1

Published

Nucleus creates basic react components for you quickly and simply!

Downloads

4

Readme

Build Status npm npm Twitter URL

Nucleus

Nucleus is a lightweight tool to help you quickly create React Components without all the boilerplate and hassle! It is designed for Mac's specifically and can be run from a simple global command nucleus!

Getting Started

To get started with this project simply run:

npm i -g react-nucleus

Note: Since this is a global npm package you may need use sudo to install it correctly.

Usage

Nucleus is easy to use and only requires one command line argument!

nucleus --name List

By default nucleus will create the component in the directory where it is executed from (e.g. ./) however this can be changed with the --out flag

Nucleus will create a new List directory and React component which will end up looking like this!

└── List
     └── List.js

List.js will contain this:

import React, { Component } from 'react';

export default class List extends Component {
    render() {
        return <h1>List</h1>
    }
}

Check out some more program arguments below!

Program Arguments

The table below helps to show the different program arguments and how to use them! Note: you cannot use --style and --template in the same command.

| Argument | Example | Shortcut | Description | Required | | -------------- | ------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | | --name | nucleus --name Auth | -n | The components name | true | | --out | nucleus --name Auth --out ./src/pages/ | -o | The --out argument defines the output where the component will be written. By default this is ./ | false | | --style | nucleus --name Auth --style | -s | This will scaffold a stylesheet along with the react component and import the stylesheet automatically into the component | false | | --template | nucleus --name Auth --template ./src/components/List.js | -t | This flag will allow you to use a custom React JS file as a template to create your new component. Ensure the path leads to a valid javascript file! | false | | --dev | nucleus --name Auth --dev | -d | Runs the application in developer mode and shows additional error logging to the console. | false | | --functional | nucleus --name Auth --functional | -f | Creates a functional react component instead of a traditional component | false | | --plain | nucleus --name Auth --plain | -p | Creates just the javascript file and no enclosing directory | false | | --quiet | nucleus --name Auth --quiet | -q | Hides most of the console output when executing the command | false | | --help | nucleus --help | -h | Shows a panel of nucleus commands and command line flags command | false |

Examples

Here are some basic nucleus examples to help get you up and running! The following examples will assume this basic directory structure and new additions will be denoted with the + character.

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
├── test
│   └── index.test.js
└── package.json

Create A Basic Component called Auth

nucleus -n Auth

produces the following directory structure:

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
├── test
│   └── index.test.js
├── Auth +
│   └── Auth.js +
└── package.json

Create a Basic Component with associated stylesheet

nucleus -n Auth --style

produces the following directory structure:

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
├── test
│   └── index.test.js
├── Auth +
│   └── Auth.js +
│   └── Auth.css +
└── package.json

Create a new component in a specific location with styles

nucleus -n Auth --style --out ./src/components/

produces the following directory structure:

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
│   │   └──── Auth +
│   │        └── Auth.js +
│   │        └── Auth.css +
├── test
│   └── index.test.js
└── package.json

Create a component in a specific location using a template

nucleus -n Auth --out ./src/components/ --template ./src/components/App.js

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
│   │   └──── Auth +
│   │        └── Auth.js +
├── test
│   └── index.test.js
└── package.json

Create a basic functional component (instead of ES6 Class based)

nucleus -n Auth --functional

would produce the following directory structure:

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
├── test
│   └── index.test.js
├── Auth +
│   └── Auth.js + (is a functional component)
└── package.json

Creating a plain component

A plain component does not have any associated directory with it and just includes the normal JS File.

nucleus -n Auth --plain --style

would produce the following directory structure

├── src
│   ├── components
│   │   ├── App.js
│   │   └── index.js
├── test
│   └── index.test.js
├── Auth.js +
├── style.css + (we include the styles just not the directory)
└── package.json

Nucleus Templates

The --template ./path/to/your/component.js is a powerful way to create new components based on previous components.

Say for instance you have tons of components you need to make which all need to be wrapped in a <Container /> component in the render method.

You can use a template of a previously created (Container wrapped) component to quickly create all your new components!

For example nucleus -n Auth --template ./component/templates/YourTemplate.js will use the YourTemplate.js file as a copy for Auth.

Handling Nucleus Errors

Often times nucleus will give you errors saying that it cannot find the right path or location to create your component in.

If you do not want to use the predefined location of your root directory (./) you must specify the option --out ./path/to/your/components

Its very important that you include the . before the path this way Nucleus knows to create the component in your current directory since it does not use absolute paths.

For Example:

nucleus -n List --out ./src/components/pages

would tell nucleus to search from your computers root / for a directory called src compared to

nucleus -n List --out ./src/components/pages

which would command nucleus to create your component in /Users/abc123/MyProject/src/components/pages which is the correct location.

Built With

  • NodeJS - Javascript event driven non blocking server side framework
  • PKG - Executable packager
  • Babel - Javascript next gen compiler
  • Webpack - Module Bundler
  • NPM - Dependency Management
  • Git - Version Control System
  • Chalk - Colored Console Output

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

If you are interested in creating a new feature just add an issue on the repository with a description of the feature!

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

FAQ

  • How do I download Nucleus? Nucleus can be downloaded via NPM using the command npm install -g react-nucleus
  • How do I run Nucleus once its installed Nucleus can be run in any terminal using the nucleus keyword. Try nucleus -V to make sure you have it installed correctly You should see the latest version appear in the console.
  • Can I specify an output directory for Nucleus Sure just use the --out ./YOUR/RELATIVE/OUTPUT/DIR command line flag.
  • It keeps saying the --name flag is required --name is the only required command line argument to nucleus try nucleus --name YOUR_COMPONENTS_NAME.
  • Can I create multiple components at the same time? Not yet but its coming soon!

Authors

  • Christian Bartram - Lead Developer - Cbartram

Why "Nucleus"

Since React is all about atoms and components are the "heart" of a React App I thought "Nucleus" would be a fitting name for the tool!

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • React for making a great framework!
  • A huge thank you to Erika for supporting me and letting me do my codes.
  • Big thanks to Jake, Taimore, and Adam for inspiring this cool little tool!