Build React Apps | Introduction And Getting Started 01

List Of Content

ADS Area (CARBON)

ADS Area (CARBON)

 

Getting Started

React is a Framework for Rendering User Interfaces in an efficient way since it is performance friendly and very easy to use, also it allows you to manipulate the different UI data and states, Created and Maintained by Facebook and Used by Big Companies and Teams for the rendering process, also you can use it natively for rendering UI for Mobile Apps (Android & IOS).

So in this Course Series, we gonna go from the basic stuff into more advanced and complicated UI State management and Using Other CSS/React Frameworks that will speed the development process for us, so in this tutorial we are going to set up the Working Environment also use React with Webpack for dependency management and Babel for JSX Syntax Compiling.

Installing Modules on Node.js Project

First, we need to install React and React Dom 

npm install react react-dom --save 

Also for Compiling and Bundling our Assets plus the JSX Syntax Recognition we are going to need Webpack, Laravel-Mix (For Easier Webpack Dependency Management) and Babel (Full Pack)

npm install webpack laravel-mix babel babel-loader babel-env cross-env 

The cross-env module is for Cross OS Bash Code Execution, So now we have the Required modules and frameworks, let set up the webpack/laravel-mix bundling process.

For Compiling JSX and React Code may be a bit tricky in most cases, but using laravel-mix plus a little bit more configuration we can do that pretty normally, so create a new file on the project root directory and name it webpack.mix.js where we are going to put our Custom Config 

let mix = require("laravel-mix");
//We Tell it to Compile our app.js file and put it on the /dist folder 
mix.js("./app.js", "dist/");

//This Solves the emitting Stuck at 95%
mix.setPublicPath("dist");

let path = require("path");

let webpack = require("webpack");
//We are telling it to use Babel Loader for Compiling our JSX Code (React and HTML)
mix.webpackConfig(
    (module.exports = {
        target: "node",
        watch: true,
        externals: ['ws'],
        module: {
            loaders: [{
                test: /.jsx?$/,
                loader: "babel-loader",
                exclude: /node_modules/,
                query: {
                    presets: ["es2015", "react"],
                    plugins: ["transform-class-properties"]
                }
            }, ]
        }
    })
);

The Config actually is very simple, we are just telling webpack through laravel-mix to compile our /app.js and put it under the /dist folder using the Babel loader for JSX and ES6 Syntax Bundling without errors.

 

our app.js file contains all the necessary files (the entry point script) so we are going to require the src/renderer.js on it so when using it on our webpage (dist/index.html)

//App.js 
let renderer = require("./src/renderer");

 

Rendering a Simple React Text

Our Project Structure Should look something like

//Project Structure
---dist
------index.html
---src
------renderer.js
---app.js
---package.json

 

Now for Bundling our Scripts, we need to run the watch command which gonna keep track of our files if there are any changes it will automatically recompile the app.js file for us, so under the scripts object on package.json add 

...
"scripts": {
   "test": "echo 'no script'",
   "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}
...

Now you can run the watch command in order to compile your app.js (jsx code) using webpack 

npm run watch 

 

You should notice that a new file under /dist folder named app.js has been created for you and this is the file you need to include (Import) in your HTML Web page for making the rendering process works, just create a simple HTML File and make sure to link to the script (app.js) at the end of the body unless it won't recognize your DOM Element and Also we need an HTML Element (Container) that is going to hold our react elements, so let's create a DIV Element giving it an ID of Root so we can refrence it later on from our JS Code to render all of our elements under it


 

... ...

 

For Now, let's try to just render a simple text using react into our DOM, so React is actually based under a Component's Entity System which means you need to feed it in a component then react is going to take care of the reset steps of the rendering and updating process we will talk more deeply about component and how they work in the next video tutorials in the series, but for now just for showcasing we are going to render a simple text

//We Import React and ReactDOM 
import React from "react";
import ReactDOM from "react-dom";
//Refrence the Root Container 
let root = document.getElementById("root");

Also, we need to create the component and add an event listener for DOMContentLoaded so we can render our elements, if we would not place our rendering method under the Dom loaded Callback we will get a very weird error

//Using render method we give it our component
document.addEventListener("DOMContentLoaded", () => {
   //Dom Content is Created and Ready
   ReactDOM.render(, root);
});
//Our Component's more on that in the next videos 
class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (

Hello World!

); } }

You can open the index.html and you should see a Hello World! Test gets printed out on the webpage from React, Cool!

 

What's Next

That was the setup process also explanation of the basic things are going on behind the scenes, so in the next video tutorials on the series we will dive deeply on react and explain different aspects, Stay Tunned!

Share Tutorial

Made With By

Ipenywis Founder, Game/Web Developer, Love Play Games