BrodaNoel

cd ~
mkdir react-fancy-component
echo 'v6.10' > .nvmrc
echo '/node_modules' > .gitignore
nvm use
mkdir build
mkdir src

BrodaNoel

{
  "presets": ["env"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-react-jsx"
  ]
}

BrodaNoel

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2' // THIS IS THE MOST IMPORTANT LINE! :mindblow: I wasted more than 2 days until realize this was the line most important in all this guide.
  },
  module: {
    rules: [

BrodaNoel

npm i
npm run build
npm link

BrodaNoel

import React from 'react';
class Fancy extends React.Component {
  render() {
    return (
      <div>This is so Fancy!</div>
    );
  }
}
export default Fancy;

BrodaNoel

cd ~
npm i -g create-react-app
mkdir react-fancy-project-test
cd react-fancy-project-test
nvm use 6.10
create-react-app .
echo 'v6.10' > .nvmrc
npm link react-fancy-component

BrodaNoel

import React, { Component } from 'react';
import Fancy from 'react-fancy-component';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

BrodaNoel

{
  "name": "react-fancy-component",
  "version": "0.0.1",
  "description": "Put a description here",
  "main": "build/index.js",
  "peerDependencies": {
    "react": "^15.5.4"
  },
  "dependencies": {
    "react": "^15.5.4",

BrodaNoel

// Option 1
render() {
  return (
    <div className="App">
      <h1>The title</h1>
      {
        this.state.movies.length > 0 && (
          <h1>Movie list</h1>
          <MovieList data={this.state.movies} />
        )

BrodaNoel

// src/components/Conditional.jsx
const Conditional = (props) => {
  return(
    !!props.if && props.children
  );
}

export default Conditional;

// Implementation: