WomenWhoCode React Workshop

The steps to create this simple example can be followed in this Workshop Overview.

What is React

• React is a component-based library.
• every part of your web application can be mapped to a component.
• this is also good for developers as it allows better code splitting -> good separation of conserns and better tests
• the change in one component doen't require the browser to render the whole application -> big advantage compared to other previous libraries / frameworks.
• beneficial when you are building web application where data changes very frequently
• this saves the browser the trouble of reloading the whole application when some change happens.
• it makes it possible to buold more complex user interactions while keeping a good browser performance.

Why learn React

According to The State of JavaScript 2018: Front-end Frameworks - React React was the most popular FE framework in 2018 in the community, being its most appreciated aspects: good choice of patterns good documentation Rich package ecosystem It’s a framework which is in high demand in the market Component based approach makes code splitting and reuse much easier than by developing for the web without any framework

---

Before you start

• Install create-react-app
• Make sure that node and npm are installed. Also, make sure your node version is 6.0.0 or higher.
• Join our slack (we can use to share links and commands more easily)
• Install React Dev Tools in Chrome

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

---

Further Learning

• Thinking in React: https://reactjs.org/docs/thinking-in-react.html
• Virtual DOM: https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/
• React Lifecycle: https://reactjs.org/docs/react-component.html
• CSS
  • Good ways to handle CSS: https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-in-js/
  • Overview of CSS in JS libraries: https://github.com/MicheleBertoli/css-in-js
• ES6 arrow functions, syntax and lexical scoping: https://toddmotto.com/es6-arrow-functions-syntaxes-and-lexical-scoping/
• PropTypes and Typing: https://reactjs.org/docs/typechecking-with-proptypes.html
• State management libraries (start with these when you are comfortable using React’s state)
• Redux:
  • Why and which? https://www.robinwieruch.de/redux-mobx-confusion/
  • Redux overview: https://github.com/reduxjs/redux
  • Redux tutorial: https://redux.js.org/basics/basic-tutorial
  • Redux videos: https://learnreduxwithdanabramov.com
  • Very accessible article about Redux: https://www.valentinog.com/blog/redux/
• MobX:
  • Github page: https://github.com/mobxjs/mobx
  • Official website: https://mobx.js.org/
  • Tutorial: https://mobx.js.org/getting-started.html
• Higher Order Components:
  • https://reactjs.org/docs/higher-order-components.html
  • https://www.karolisram.com/higher-order-components-react-pattern/
• Testing: https://reactjs.org/community/testing.html

More Tipps

Find two more ideas for React projects here.

To make the setup process easy, you can use create-react-app. This will provide a basic setup with webpack etc included.