Notes

Intro to React Ecosystem

Edit on GitHub


ReactJS
3 minutes

Imperative (How) vs. Declarative (What)

Imperative = how to do something, specific instructions Declarative = what to do, doing something that is somewhat already defined

Composition (Components)

think in terms of components. components inside of components. breaking everything down to components. nesting components. you can create larger components composed of smaller components.

Components = aka widgets, modules

Functional composition is where you write smaller helper functions that you can use in bigger functions.

Explicit Mutations

The only way a state will change or be kept is if you explicitly specify it using it .setState()

(In Angular 1, it magically keeps all your models in sync)

It’s just JavaScript

React is just JavaScript. If you’re getting frustrated with React, it’s probably because your JS knowledge is lacking. For example .map() is very good for generating HTML lists in React. But if you don’t know the JS .map() method, you’ll wonder what happened.

Piecing the Puzzle

  • React
  • React Router (let’s you map React components to certain URLs. As you move around in the app, different components become active based on what URL you are at)
  • Webpack (like Grunt/Gulp. bundler, task runner, whatever you wanna call it)
  • Babel (transpiler, let’s you transform your code to standard JS. It could be JSX to JS, ES6 to ES7 etc.)
  • Axios (making HTTP request, promises)

JSX

JSX is just an XML-like syntax for writing React components. You can use plain JavaScript as well, but JSX makes it easy.

The “HTML” that you’re writing in the render method isn’t actually HTML but it’s what React is calling “JSX”. JSX simply allows us to write HTML like syntax which gets transformed to lightweight JavaScript objects. React is then able to take these JavaScript objects and from them form a “virtual DOM” or a JavaScript representation of the actual DOM. This creates a win/win situation where you get the accessibility of templates with the power of JavaScript.

Setting up

  • react:
1npm i -S react react-dom
  • tools:
1npm i -D webpack html-webpack-plugin webpack-dev-server babel-{core,loader} babel-preset-react

.babelrc

1{
2"presets": [
3    "react"
4]

webpack.config.js

 1// webpack.config.js
 2// html-webpack-plugin
 3var htmlWebpackPlugin = require('html-webpack-plugin');
 4var htmlWebpackPluginConfig = new htmlWebpackPlugin({
 5    template: __dirname + '/app/index.html', 
 6    filename: 'index.html',
 7    inject: 'body'
 8});
 9
10module.exports = {
11
12    // Entry point(s)
13    entry: [
14        './app/index.js'    
15    ],
16
17    // Output dir and file
18    output: {
19        path: __dirname + '/dist',
20        filename: "index_bundle.js"     
21    },
22
23    // Trasnformations (loaders!)
24    module: {
25        loaders: [
26            { test: /\.js$/, exclude: /node_modules/, include: __dirname + '/app', loader: "babel-loader"}
27        ]
28    },
29
30    // Plugins to load
31    plugins: [
32        htmlWebpackPluginConfig 
33    ]
34};

index.js

 1var React = require('react');
 2var ReactDOM = require('react-dom');
 3
 4// use the .createClass method on the React object to create a React component
 5class HelloMessage extends React.Component({
 6
 7    // every React component must have a render method
 8    render() {
 9        return (
10      <div> // every component needs to be wrapped in a containing element 
11        Bonjour {this.props.name}!
12      </div>
13    )
14    }
15});
16
17// Render the component we just created
18ReactDOM.render(
19    // takes two args
20    <HelloMessage name="Aamnah"/>, // component to render
21    document.getElementById('app')  // where to render to
22);

Virtual DOM components start with a capital letter. While <link> is plain HTML, <Link> is a JSX React component

Browse all topics