- Last update:

React

A quick introduction to React.js

🕒 3 min read

Category: Code

Tags: code, javascript, react, mobile, android

First of all, I wish you a Happy New Year. May it be full of happiness and lines of code :-)

Let's now talk about the new hotness, a JavaScript library getting more and more trendy, with an unceasingly growing community: React. It's under active development these days, powered by Facebook (and initially created by). Basically, it's meant to build user interfaces in a web context, but recently they also exported it to mobile development, alloying anyone to write some kind of cross-platform code for both Android and iOS, in JavaScript, just like Appcelerator Titanium.

At the present time, I'm still getting acquinted with it, but here are a few pieces of advice about how to get started correctly.

Must read

  1. react-howto
  2. webpack-howto
  3. Presets for setting up webpack with hotloading react and ES6(2015) using Babel
  4. Redux
  5. Smart and Dumb Components
  6. React modules
  7. Project structure
  8. React and Redux Single Page Applications Resources
  9. Overreacted
  10. React as a UI Runtime

How to

You have 2 main tools of choice, to compile it into some browser-compliant package: Webpack or Browserify. I personally decided to go with the former, as it's the most popular and offer more possibilites. Briefly, how to start a new project with webpack:

npm init # Entry point: index.js
npm install --save react react-dom babel-preset-react babel-preset-es2015
# The previous line is required to run React with ES6
npm install webpack --save-dev
# --save-dev allow us to add it to the package.json
npm install webpack-dev-server --save-dev
# To live reload changes in the browser in development
# MUST NOT BE USED IN PRODUCTION
npm link webpack # To make the command available as if it was installed globally
npm link webpack-dev-server

# Install babel
npm install babel-loader --save-dev
# OR, in case of problem
npm install babel-loader@5.x --save-dev

Configure webpack

There are two ways to pass the configuration object to webpack. However, here we're going to use the CLI way, which uses a conf file. Create webpack.config.js at the root of the project, containing this:

module.exports = {
    // configuration
};

That's all for now. This article is likely to be updated in a near future, stay tuned!

PS: a friend of mine also gave a talk last year, at our school, about React. He was an avant-gardist ;-)

Tips for Webpack here.

Futher reading

Bundle size optimization

Performance

Functional components

About Babel

About Redux