Need help for frontend development

What's the "proper" way to start adding code to the frontend?

What I have tried:
1. cd frontend
2. npm i
3. npm i --save-dev eslint-config-react-app eslint-plugin-import eslint-plugin-flowtype eslint-plugin-jsx-a11y eslint-plugin-react object.fromentries array.prototype.flatmap string.prototype.matchall internal-slot eslint-plugin-react-hooks (I had to install all these, so that I won't get "module not found" errors on running gulp watch)
4. gulp watch

After all these steps, gulp yells hundreds of warnings and errors at me.

I noticed there is a package.json file on the root directory of the project, so there may be something wrong with my practice.
Also, as docker mounts all files in the project to the container, will the huge node_modules folder slow things down?

Does anyone have any ideas? Thanks!

I was wondering the same thing, but I don't think it slow things down.
If I understand correctly, the project folder is simply been shared between the container & the host. Let's assume that the container is serving a static file named mystyle.js. And we make some changes to mystyle.js in the host. The next time the container serve this file, mystyle.js will have those changes, because the same file is been shared.

Well, that's how I understand it, someone correct me if I'm wrong.

Edit : That only happens in development of Misago. For production it would not be done this way. For example, misago_docker has a completely different approach.

Very true!

However, it's not my major concern that node_module is huge. The more important thing is how to make custom changes to the frontend project, 'cus gulp.js thinks I'm totally fucked up, bro. Did you managed to do it?

Something like this:

[00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\options\root.js: Unexpected token (17:6)

  15 |   render() {
  16 |     return (
> 17 |       <div className="page page-options">
     |       ^
  18 |         <div className="page-header-bg">
  19 |           <div className="page-header">
  20 |             <div className="container"> while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\options\root.js   
undefined
[00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\users\root.js: Unexpected token (13:6)

  11 |   render() {
  12 |     return (
> 13 |       <div className="page page-users-lists">
     |       ^
  14 |         <div className="page-header-bg">
  15 |           <div className="page-header">
  16 |             <div className="container"> while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\users\root.js     
undefined
[00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\user-menu\root.js: Unexpected token (8:13)

   6 |   render() {
   7 |     if (this.props.isAuthenticated) {
>  8 |       return <UserNav user={this.props.user} />
     |              ^
   9 |     } else {
  10 |       return <GuestNav />
  11 |     } while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\user-menu\root.js
undefined
[00:59:14] SyntaxError: 'import' and 'export' may appear only with 'sourceType: module' (2:0) while parsing C:\Users\MyUserName\Desktop\Misago\frontend\src\services\zxcvbn.js while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\services\zxcvbn.js
undefined
[00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\categories\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (35:10):

  33 |   }
  34 | 
> 35 |   update = data => {
     |          ^
  36 |     this.setState({
  37 |       categories: data.map(hydrate)
  38 |     })

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.     
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing. while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\categories\index.js
undefined
[00:59:14] SyntaxError: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\social-auth\index.js: Support for the experimental syntax 'classProperties' isn't currently enabled (18:30):

  16 |   }
  17 |
> 18 |   handleRegistrationComplete = ({ activation, email, step, username }) => {
     |                              ^
  19 |     this.setState({ activation, email, step, username })
  20 |   }
  21 |

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.     
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing. while parsing file: C:\Users\MyUserName\Desktop\Misago\frontend\src\components\social-auth\index.js
undefined

I'm not sure about the errors. I use the same gulp.js installed by npm in the frontend directory. (Misago/frontend/node_modules/gulp/bin/gulp.js). Just to make sure is the same version. I believe had to install a few packages, but it was my fault for not running npm on both folders containing a package.json file.

Another thing, are you thinking to use misago_docker for production ?