MOB-atheist/ReactJS-study

This repository was a case study of a React.js application as an open source repository, following the standard some repos use

ReactJs study

---

Here well have some examples using ReactJs features, like components, also there is going to be applied some advanced techniques with webpacker and packages management.

The React script doesn't have much to it right now, because i am building a very complete and reliable wepacker configuration, togheter with a npm package configuration that suits most uses.

The project Can be reused for many purposes, as it generates a html file, with features like defer and async to allow for a very good SEO experience, improvements will be made with time.

📝 Table of Contents

• About
• Prerequisites
• Installing
• Usage
• Deployment
• Dependencies
• TODO
• Contributing
• Authors
• Acknowledgments

🧐 About

This repository will be used for studying ReactJs, React native, React router, Webpacker.

Prerequisites

These are the softwares you need to start working.

 - Node >= 12
 - Npm
 - Webpacker >= 4

Installing

You will need to have installed NodeJs higher than 12.

To show the node verion.

node -v

After installed, navigate to the folder at the command line and run the npm command

npm install

This command will create node_modules folder with all dependencies

After all is done, start the webpacker file wacther using the command.

npm run dev

Or you can use the production command.

npm run build

To start the webpack-dev-server for development environment.

npm run start

By default the server will start at localhost:9000, you can change that in webpack.config.js.

    devServer: {
      contentBase: path.join(__dirname, '/public'),
      host: 'localhost',
      compress: true,
      port: 9000
    }

🎈 Usage

To edit the content please work with the assets folder.

If needed to create another html page, add another instance of HtmlWebpackPlugin to the webpack.config.js file, like the code below.

    new HtmlWebpackPlugin({
      filename: '../index.html',
      template: 'assets/index.html'
    }),
    new HtmlWebpackPlugin({
      filename: '../test.html',
      template: 'assets/test.html'
    })

To add or remove any file from the bundle excluding html files, please use all.js inside assets to specify what is loaded.

// DEPENDENCIES //
const file = require('packageName');
// CSS //
const file = require('./css/file.css');
// JS //
const file = require('./js/file.js');

The only script that cannot be changed at all.js is loader.js, this file is responsible for the app loading screen, he is required at webpack.config.js

    entry: {
      'loader': path.resolve(__dirname, 'loader.js')
    }

🚀 Deployment

For production bundle you can use.

npm run build

⛏️ Built Using

• ReactJs - Web Framework
• NodeJs - Server Environment

✍️ Authors

• @MOB-atheist - Idea & Initial work

See also the list of contributors who participated in this project.

🎉 Acknowledgements

• Hat tip to anyone whose code was used