react component module is not rendering in its own directory when npm start

Question

TLDR: npm start is not rendering component

So im sort of confused on the folder structure when it comes to developing a distributable react component.

I want to be able to demo my module within the module directory itself as well as being able to distribute the component in another application.

This is my current directory

Currently npm start gives me this

this is my webpack config

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'index.js',
    libraryTarget: 'commonjs2' // u sorta need this

  },
  module: {
    rules: [
      {
        test: /\.js$/,

        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: { 
            presets: ['@babel/preset-env', '@babel/react'],
            plugins:['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
//  public directory will render the component.
  devServer: {
    contentBase: __dirname  + './dist',
    compress: true,
    port: 9000,
    watchContentBase: true,
    progress: true
  },

};

dist/index.js

import React from "react";
import ReactDOM from "react-dom";
import Fetch from '../src';

const App = () => (
    <div>
        <Fetch/>
    </div>
)

ReactDOM.render(<App />, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
  </head>
  <body>
    <div id="root"></div>

 </body>
</html>

and src/index.js

import Fetch from './Fetch';

export default Fetch;

Answer 1

Use storybooks for demo and document your reusable components . better approach is to have stories at component level by adding .stories.js file to your each components .

checkout : https://storybook.js.org/ .

For folder structure you can start with create-react-app which gives you all the features you need to build, run and test .

checkout : https://github.com/facebook/create-react-app

react component module is not rendering in its own directory when npm start

Question

1 answers

solution1
0 2019-06-30 20:21:31

react component module is not rendering in its own directory when npm start

Question

1 answers

solution1 0 2019-06-30 20:21:31

solution1
0 2019-06-30 20:21:31