react-dang v1.2.10-alpha

react-dang

React basic application.

Index of Contents

• Description
• Usage
• Commands & Flags
  • install
    • --bare
    • --git
    • --name
    • --author
    • --description
    • --license
    • --version
• Road Map
• Koorie
• JetBrains OSS License

Description

The ReactDang Application is a npmjs package that will initialize a Basic React Web Application having two default pages to start working with.
Home page and a Contacts page.

It uses:

• Babel under the hood to compile the React Application.
• eslint for linting.

• It spins up webpack with two default configurations:

  • Development -> It builds the javascript specifically for webpack devServer.
  • Production -> It builds the app with some performance improvements.
  • Use Koorie just with Production configuration because it doesn't support webpack Hot Module Replacement with Development configuration.

Available Components for react basic application:

• Header -> Handles the header shared between the web application pages.
• Links -> Handles the available links of the web application. It is imported in the Header.
• Index -> Handles the Home Page.
• Contacts -> Handles the Contacts Page.
• ContactForm -> Basic contact form. It is imported in the Contacts.
• Footer -> Handles the footer shared between the web application pages.

React Dang install @react-dang/app under the hood. you can browse the code at GitHub.

Usage

React Dang is very simple to use.

1. from your current working directory

mkdir my-project && cd my-project

2. Once inside the just made directory.

# You'll be asked to confirm the use of the --bare flag
npx react-dang install --bare --name=my-project \
  --git \
  --author='Your Name' \
  --license='MIT' \
  --version='1.0.0' \
  --description='My Project does this and that'

3. the output should look like this.

# react-dang ready to go

  already in the project root directory
  
  npm run build-prod
  
  npm run koorie
  

after running 'npm run koorie' command the output should look like this ⬇

> my-project@1.0.0 koorie
> npx koorie --static-files=public  --library=react

{ address: '127.0.0.1', family: 'IPv4', port: 3001 }
koorie your browser here ⬇︎ 
 http://localhost:3001
----------------------------------------------------

open your browser and try it out

Commands & Flags

install

The install command will instantiate a React project based on @react-dang/app

• --bare

  • This flag doesn't accept any argument. Instantiates the project in the current working directory.
  • ⚠ will overwrite everything in the current working directory.

• --git

  • This flag doesn't accept any argument. Initialize a git repository.

• --name

  • Sets package.json property name.
  • Default set to autogenerated.

• --author

  • Sets package.json property author.
  • Default set to autogenerated.

• --description

  • Sets package.json property description.
  • Default set to autogenerated.

• --license

  • Sets package.json property license.
  • Default set to Apache-2.0.

• --version

  • Sets package.json property version.
  • Default set to 0.0.1

Road Map

• --blank{void} - Initializes a React project without any components.
• --git={void} - Initializes the local git repository, requires git installed on the host OS.
• --json={options(option:value)}-{from file} - Populates the package.json properties from a set of options(key:value) or load from a file.
• --url-repository={string} - Sets the git repository url package.json
• --dependency={options(option:value)} - Sets dependencies package.json
• --devDependency={options(option:value)} - Sets extra-devDependencies package.json
• --scripts={options(option:value)} - Sets extra-scripts package.json

Koorie

In this template project Koorie exposes a route to handle the message sent from the contacts form.
just check the code @./routes/message/route.js in the root directory of your project.

Another important file @./middleware.js where is possible to inject new routes into koorie. check the code.

To know more about Koorie and its functionalities go @ ➡ GitHub.

JetBrains OSS License

I want to thank JetBrains to grant me the Open Source Software license for all their products. This opportunity gives me strength to keep on going with my studies and personal project.
To learn more about this opportunity have a look at Licenses for Open Source Development - Community Support.

Thank you