WarsawJS Slides: How to begin a new project with React?

We talk about JavaScript. Each month in Warsaw, Poland.

Speaker

Piotr Zientara

How to begin a new project with React?

2017-09-13

@Piotr_Zientara

About me

Talk to me about...

What's the plan?

Why React App from scratch?

Interoperability

We place high value in interoperability with existing systems and gradual adoption. Facebook has a massive non-React codebase.

Design Principles

What is the most important quality of a software developer?

In long term to me it is...

The first quality that is needed is audacity.

Winston Churchill

Good news!

We can exercise it!

Project Assumptions

Yesterday I've saw on chat...

setting up a react project is not that difficult at all

task-runner / transpilator

compiler

test

lint

server

async handler

documentation

Summing up

8 * 6 * 16 * 9 * 4 * 4 * 5 = 552 960

Thanks @michaljanaszek

For the inspiring list and publishing on our Slack! :-) (it was created by Google BigQuery)

Let's make a jump! What is the hardest problem in Computer Science?

Complexity management!

But that is obvious, as the definition of hard is also "complex". And it more generic, doesn't limit to Computer Science!

How to start with create-react-app?

What's there in the initial config?

Not everyone likes this idea

Test that can be run by Jest

            
                import sum from './sum';

                it('sums numbers', () => {
                  expect(sum(1, 2)).toEqual(3);
                  expect(sum(2, 2)).toEqual(4);
                });
            
        

What is missing, but we hope to have in the future?

Hot Module Reloader

Let's try this config!

And the package manager?

yarn vs npm

And the most important...

Thunks, Sagas or Epics?
Watch Illarion about it!

And let's add this to scripts in package.json

            
              "scripts": {
                ...
                "lint": "eslint --ext=js --ext=jsx .",
                "lint:fix": "eslint --ext=js --ext=jsx --fix .",
                "test:unit": "react-scripts test --env=jsdom",
                "test": "yarn run lint && yarn run test:unit"
              },
            
        

Requests

Using axios
            
                const config = {
                  baseURL: process.env.API_URL || 'http://localhost:8000/api/v1/',
                  headers: {
                    'content-type': 'application/json',
                  },
                };
                const request = axios.create(config);
            
        

Import cost?

Caveats

Returning an assignment (React doc)

And eject was finally needed...

When applying tooling for styled-components

Hashed classes in inspector

And all the stuff in head

Other solutions

Dependecies comparison

True dependecies comparison (after eject)

Candidates repo overview (10.09.2017)

Boilerplate Dependencies Issues Commits Contributors Stars
Create React App 37 237 1192 363 34 117
React Starter Kit 28 348 846 125 15 335
React Boilerplate 30 207 1277 161 15 236
Redux Simple Starter 12 55 54 5 1 971
Neutrino 24 23 376 31 1742

Libraries comparison

Boilerplate Flux Async Tests Extra Features
Create React App none RxJS Lite Jest PWA
React Starter Kit none none Enzyme + Jest + Sinon Universal App, SSR
React Boilerplate Redux redux-saga Enzyme + Jest + Sinon Generators
Redux Simple Starter Redux none Mocha + Chai Tutorial
Neutrino presets presets presets presets

Libraries comparison

Boilerplate Licence Type
Create React App BSD 3-clause
React Starter Kit MIT
React Boilerplate MIT
Redux Simple Starter MIT
Neutrino MPL-2.0

The risk is great

The decision, of course, is yours.

Sources

Thanks for watching!

STATS

Presentations

Meetup

Members: 2668 (+ 1 141 last year)

Social Networks

YouTube

Most popular talks this year!

Martyna Nowocień: React na start - informacje w pigułce dla zainteresowanych ReactJS [PL] - WarsawJS #31

Organizers

See you next month at WarsawJS#37 (second Wednesday of October)