React Course - Lecture #1

Intro to tooling & React

Course details

  • 2x a week
  • Discord for communication (more on next slide)
  • GitHub repo - HackSoftware/React-Course-2018
  • Until ~16th of December
  • No required "homework". Be present here.

Discord

https://discord.gg/CX4rRfd

We'll use it for communication & questions. Less noise than Facebook group, lighter than Slack.

Teachers

Rado, Ivo & the Hack Team

+ guest speakers

hacksoft.io

node and nvm

  • node or "NodeJS" is a "server-side" JavaScript.
  • node runs JavaScript outside the browser
  • node runs everything for our React development
  • nvm (node version manager) is used to have multiple node versions on your machine
  • nvm installs node "locally", instead of "globally"

npm

  • Means "node package manager"
  • We install 3rd party libraries via npm from the registry -> https://registry.npmjs.org/
  • Comes with the beloved package.json
  • And the infamous node_modules
  • The "jelly" to node (the peanut butter)

yarn

  • The modern JavaScript package manager, introduced by Facebook
  • It's faster than npm
  • Works with package.json & the NPM registry via proxy -> https://registry.yarnpkg.com/
  • Comes with something called yarn.lock
  • Perhaps shares info with Facebook*

npx

Neat tool that comes with NPM

$ nvm use 10.12
$ which create-react-app
$ create-react-app not found
$ npm install -g create-react-app
$ which create-react-app
$ /home/radorado/.nvm/versions/node/v10.12.0/bin/create-react-app
$ create-react-app ...
$ npx create-react-app my-app

vs.

create-react-app

  • "Cookiecutter" for React apps, supported by Facebook
  • Hides away all the nasty configuration.
  • Really good defaults
  • We use it in production for all of our projects

Check this talk - The Melting Pot of JavaScript, by Dan Abramov

React Developer Tools

  • Inspect React components, instead of rendered DOM elements (HTML)
  • Extension for your browser - get it since we are going to use it a lot!
  • Will be used when we are optimizing and checking what is rerendering

VS Code

Good "default" editor for React

prettier

Lets get started!

React

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

It lets you compose complex UIs from small and isolated pieces of code called components

Taken from https://reactjs.org/tutorial/tutorial.html

Components = Separation by concern

A component can contain

  • UI logic
  • Markup
  • Styling

JSX

const element = <h1>Hello, world!</h1>;

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
  • Optional
  • XML / HTML-like syntax
  • Produces "React Elements"
  • Help with the "Declarative" part
  • Can contain JavaScript expressions
  • A templating language

Examples

  • Heading (props / children)
  • Counter (state)

React Course - Lecture #1

By Hack Bulgaria

Made with Slides.com

React Course - Lecture #1

  • 1,234

More from Hack Bulgaria