Getting Started with React Development in 5 Minutes

Fri 01 June 2018 Category web, js

cyberpunk

Hey Everyone!

The VR world has a lot of React and there is so many things I have been learning and I want to share with you! I am starting to write a series of posts diving into React and I am dumping all the things in this github repository.

Today I am showing how easy is to start with React in 5 minutes.

What's React?

From React's documentation: "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”.

Some Concepts

Components

Everything in React is a component, and these usually take the form of JavaScript classes.

Starting with React.Component, the render method returns a description of what you want to see on the screen, returning a React element, which is a lightweight description of what to render.

JSX

React developers use a syntax called JSX which makes these structures easier. For example, the <div /> syntax is transformed at build time to React.createElement('div'). You can put any JavaScript expressions within braces inside JSX!

Data

There are two types of data in React:

  • state: private and can be changed from within the component itself.
  • props: external, and not controlled by the component itself.

A component can change its internal state directly but it can not change its props directly.

OK, Just Show me React Already!

OK!

  1. Install Node.js and Yarn.
$ brew install node
$ brew install yarn
  1. Install create-react-app. This awesome framework abstracts away all the complexity of implementing Webpack, Babel, a dev server, a production build process, and other critical things.

  2. Create Your App

$ yarn create react-app <your-app-name>
  1. Run it!
$ cd <your-app-name>
$ yarn start
  1. You now have your app running at http://localhost:3000/! The components of your app are the following:

  2. node_modules: holds all the third-party code, such as React.

  3. public: where our static assets go, like our favicon. It also keeps the project's HTML file. Because React is all JavaScript, you only really need the HTML file to update the head (like title and meta tags).
  4. src is where our application actually lives. I’d recommend exploring all these files, to get a sense of how they work together.

  5. Go to src and edit App.js (and App.css) to add things you want React to render:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          HELLO THERE!
          <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

You will see the additions instantly updated in your browser at http://localhost:3000/. Also, keep in mind that index.js is where all of your React code lives.

Voilà! Dat's it? Yes, datzit! <3

References to get Started


Test it at home and stay tunned for the next episode when we are going to talk about React 360! 🦄