Publish Your React Component

Publish Your React Component

Share your code, Build your repo

Mark Muskardin - hackingbeauty.comSeptember 22, 2016 - San Francisco ReactJS

2

I’m a UI Engineer(Single Page Apps with React/Redux)

3

Web Apps are evolving…

Source: developers.google.com/web/progressive-web-apps

4

JavaScript is evolving too…

Yesterday Today

(You should be writing in ES6 now)

5

We have an awesome publishing system

6

Developers have a lot of problems…

7

Disjointed Codebases

Mobile Web Desktop Web IOS Android

Many companies don’t just have 1 app

App 1 App 2 App 3 App 4 App 5

9

Company UI Library

10

(saves time and money)

* Reusability is key *

11

Today, we do things differently

DEVELOP IN COMPONENTS

Why publish your own component?

YOU are an evolving developer.

13

1. You learn key engineering principles

14

“Write programs that do one thing and do it well.

Write programs to work together.”

- The Unix Philosophy

15

2. Helps build your portfolio

16

3. It’s really easy & you get to share

18

19

I want to let you in on a little secret…

20

You don’t have to build everything from scratch

21

REMEMBER“Write programs that do one thing and do it well.

Write programs to work together.”

22

For example…

Write something simple

For example…

23

24

Material-UI Components

25

Material-UI Autocomplete

26

material-ui-youtube-autocomplete 1.2.1

27

< 100 lines of codehackingbeauty.com/create-a-reactjs-component-part1

28

How do I start?

29

#1 - Figure out what to build, then build it(Keep it small and focused)

30

ui-patterns.com

31

#2 - Write good documentation

32

A solid README.md on Github

Show usage and an example!

33

#3 - Build a demo (critical for UI components)

34

Free on Github Pages

35

#4 - Tell people

36

reddit.com/r/reactjs

37

Write a short blog post

38

Make your life easier…

39

My favorite tool: NWB

40

* CLI for bootstrapping components/libraries

* Builds the demo page for you!!!

* Dev tools, testing, production builds, configuration

NWB (github.com/insin/nwb)

41

React-specific tips on reusability

There’s more to know…

CSS management

Testing

42

Thank you!hackingbeauty.com/reactbook