Creating a React Application using Alt.js, Material UI and Firebase - PART 1

in #utopian-io6 years ago

Repository

https://github.com/facebook/react

What Will I Learn?

  • You will learn how to create an amazing real time react application.
  • You will learn how to configure and integrate webpack in our application.
  • You will learn how to connect our application with python web server.
  • You will learn how to transpile code using Babel and webpack.
  • You will learn how to create react components and passing DOM element.
  • You will learn the testing of our application on the real time web browser.

Requirements

Difficulty

  • Intermediate

Resources

Required Knowledge

  • Good understanding of Node.js and React.js
  • A thirst for programming and creating something innovative

Tutorial Contents

Description

Welcome to the tutorial on how to create a react application using Alt.js, Material UI and Firebase. In this tutorial we are setting up an environment for our React app. We are also going to use webpack throughout this tutorial. After that we configure our webpack code to transpile our JavaScript files using Babel. We add React coding then and creating react components. We will learn how to configure webpack to get this behavior for React app. Also we see how to integrate SASS with webpack. In the end, we test our connection with the web browser.

Integrating Webpack:

We start our tutorial by creating the basic structure of our project. We simply creating a new directory named as react-stack and then in this directory we are going to install our dependencies.
npm init
So, we are using npm for the installation of our dependencies and libraries, we type npm init which will create package JSON file.Now we moved on the installation of webpack by typing this command:

Install webpack –save

Save argument ensures that our dependencies store in package JSON file.Now create two scripts files in the main folder and named them script1.js and script2.js.We use common js to make default export of this file a string which is

This is CryptoCoder
module.exports= 'This is CryptoCoder';

We move to script2 and create a message variable. To this variable we assign the result of requiring script1.

var message = require('./script1');

Now that we have the message available, let's just write it onto the document,

document.write(message);

Webpack.config.js

In order to package this code for consumption by a browser we need to tell webpack that we want to create a bundle that includes these files. We do this by creating a webpack configuration file. Which is called webpack.config.js. Webpack expects this file to export an update containing the packing config.

module.exports = {
  entry: {
      main: [
        'script1.js',
        'script2.js',
      ]
  },

The first attribute we specify above is called entry. Entry contains all the inputs for your packages. Each package you want to produce should have an attribute on entry. We are going to create a main package and we use an array to specify that this package should include script1.js and then script2.js.

  output: {
    filename: './public/[name].js',

  }
}

Now that we have defined our inputs on the entry module, we move onto the output definition by adding an output attribute. We do this by specifying the variable name .
Let’s go to the command line and run the webpack command and you can see that it took script1 and script2, which is exactly what we wanted. In the main folder we create an index.html file and create a standard HTML document.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <script src="/public/main.js"></script>
  </body>
</html>

Just before the body close I add a script element and set the source to our generated file at public/main.js. Let’s just host it using python's web server module. To do this we type

python -m SimpleHTTPServer

Now that we've got that running on the server


Now look at the browser, it seems to be working. This looks boring, I know, but a lot is happening which is data abstraction.

Transpiling Using Babel and Webpack:

We are relying on ES6 and even ES7 features throughout this tutorial, so we need a way to transpile to ES5 to ensure that we can run our code in a browser. We are going to install the Babel loader module. So in terminal we type

npm i babel-loader --save

I am passing this --save flag here to ensure that we save the dependency to the package JSON file. Now that we have got the Babel loader package installed, we open the webpack.config file in atom to set up.

We need to add a module attribute to the config. On the module we add loaders attribute and set that to an array. We first create a test attribute, which is webpack uses to figure out whether the file. As its value, we provide a pattern that matches the file name. In our case, we want it to execute for any file with a .js extension. Next, we add an exclude attribute and specify a special value for node_modules.

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
  ]
  }

In script2 changing the document so that it displays string template. So do this with a special quote characters and add a message. And then we use the dollar brace syntax to interpolate the message variable

document.write(‘This is formatted with ES6 ${message}’);

We need to run webpack again to compile our bundle.


Let's see if that worked in the browser. Yes it is working

Creating React Components:

Now we are going to install React in this tutorial. On terminal we install React using npm. Let’s add some structure to our app. I am creating a source folder where we will put everything that needs to go through webpack. All our js and SASS files will place here. Now I am creating a components folder. This will contain all of our React components. And in here I create a file called App.jsx. This will contain our first React component.

import React from 'react';

We do this by stating that we want to import onto a variable called React the default export from the React module. This will look for a React package in the node modules directory. To create React Component we will use this code.

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      messages: [
        'Hello Utopian-IO how are you?',
        'I am fine, and you?'
      ]
    };
  }

constructor()

We need to always make sure that we provide a constructor that calls the super constructor. Another thing that is important to do in the constructor is setting up the default state for the component. We do that by just setting a variable called state onto the component instance and specifying the state variables. Now just add a state variable called messages. In this array we just add some strings for messages, the first one we set is, hi Utopian-IO how are you? And another one is, I am fine, how are you

render(){
    var messageNodes = this.state.messages.map((message)=> {
      return (
        <div>{message}</div>
      );
    });

Now we add a render method to this component. Let's create an element for each message on our state. For this you have to create an array of elements. We declared a variable called messageNodes. To assign this a value, we start mapping over the messages variable on state. We want to generate an element for each item in this array. So in our callback function we type. For each message we want to return a div with a message.

  return (
      <div>{messageNodes}</div>
    );

We specify another div and its children we specify that we want the messageNodes. Render should always return only one element.

export default App;

Now we use the export keyword to make this component the default export of this file. So we've created a React component. We create a file called main.js and in this file import React from the React module.

import React from 'react';
import App from './components/App.jsx';

We import the App component from App.jsx, which we just created. Now we call React.render and pass it some markup to render, in this case an instance of our App component.

App.js file complete source code

mport React from 'react';

class App extends React.Component {
  constructor(){
    super();
    this.state = {
      messages: [
        'hi Utopian-IO how are you?',
        'I am fine, and you?'
      ]
    };
  }

  render(){
    var messageNodes = this.state.messages.map((message)=> {
      return (
        <div>{message}</div>
      );
    });

    return (
      <div>{messageNodes}</div>
    );
  }
}

export default App;

Adding DOM

We also pass a DOM element where we want the marker to be added.

React.render(<App />, document.getElementById('container'));

we use the getElementById method to get a div with an Id of container. We need to create that div, and this we do in the index HTML file.

<div id="container"></div>

Now we have a div with an id of container. Now we define our App component in a file called App.jsx, so with the jsx extension.

test: /\.jsx$/,

In the test regex for the Babel loader, we just add an x to the end in order to match jsx files.

./src/main.js

Another thing we have to do in the config is to remove these inputs and replace them with main.js in the source folder. We add a question mark after the x to match both jsx and js files. In order to enable the features in Babel, we quickly create a babelrc. File and inside it we specify that we want stage to be 0.

Webpack.config file complete source code

module.exports = {
  entry: {
      main: [
        './src/main.js'
        
      ]
  },
  output: {
    filename: './public/[name].js',

  },

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }

}

Testing Outcome:

Now we move back in the terminal we run the webpack command to rebuild our bundle.


Now when we refresh our page, it worked. We have got our React component rendering using webpack as the packager and compiler.

Conclusion:

So we have learned how to integrate webpack and create package JSON file for our app. Also we have studied how to connect to python web server. Then we learned how to transpile our ES6 code using Babel so that it will be run on all browsers. We have learned how to add react components to our app and then calling constructors in it. Finally, we adjust our js and jsx files and checking the results on the browser and it works perfectly. In the next tutorial we will see how can we reload and debug. We will also learn the compiling of SASS.

Curriculum

This is the first part of the tutorial, when new parts will created they will be placed here.

Project Repository

Thank you for consideration

Sort:  

@syedshoaib, I gave you an upvote on your first post! Please give me a follow and I will give you a follow in return!

Please also take a moment to read this post regarding bad behavior on Steemit.

Thank you for your contribution.
While I liked the content of your contribution, I would still like to extend few advices for your upcoming contributions:

  • Structure of the tutorial: Improve the structure of the tutorial.
  • Avoid repetition: Frequent use of words or phrases makes reading the tutorial more annoying.

Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

Hey @syedshoaib
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Congratulations @syedshoaib! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 1 year!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.39
TRX 0.12
JST 0.040
BTC 70118.22
ETH 3546.28
USDT 1.00
SBD 4.89