canyener / indecision-app

A very common and very small app to learn basic fundamentals of react.

indecision-app

Add your options, let the computer guide you!

When using React with cdn

Add react cdn and app.js script to index.html

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>

With global modules (I strongly recommend you should avoid global modules)

Install live-server globally with yarn add global live-server or npm install -g live-server

Install babel-cli globally with yarn add global babel-cli or npm install -g babel-cli

Run this command as a script to compile

babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch

Run this command to start web server

live-server public

Without global modules (Yay!)

Install live-server by running yarn add live-server

Install babel-cli by running yarn add babel-cli

Add script for compiling,

example script: "babel-compile": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"

Add script to start web server

example script: live-server public/ --port=<port-number-you-choose>

When using webpack

yarn run serve to start web server yarn run build to compile code with webpack

or simply run

yarn run dev-server to compile and start web server with webpack

indecision-app's Issues

Use Component as a named export in class based components

Instead using like;

class Foo extends React.Component

Import Component as a named export and use like below;

import React , { Component } from 'react'
class Foo extends Component {

Remove all unused dependencies from project

Configure and add tests