Tutorial Lengkap React Boilerplate - Dari Nol hingga Pahlawan

Saat kita mulai belajar React, untuk membuat proyek kita, kita perlu membuat boilerplate dari awal atau menggunakan beberapa yang disediakan oleh komunitas. Hampir sepanjang waktu itu adalah aplikasi create-react yang kami gunakan untuk membuat aplikasi tanpa konfigurasi build. Atau kami hanya membuat boilerplate sederhana kami sendiri dari awal.

Dari sini, yang terlintas dalam pikiran: mengapa tidak membuat boilerplate dengan semua dependensi yang selalu saya gunakan dan biarkan siap? Komunitas juga berpikir seperti itu, jadi sekarang kami memiliki beberapa boilerplate buatan komunitas. Beberapa lebih kompleks dari yang lain, tetapi mereka selalu memiliki tujuan yang sama untuk menghemat waktu maksimum.

Artikel ini akan mengajari Anda bagaimana Anda dapat membuat boilerplate Anda sendiri dari awal dengan dependensi utama yang digunakan dalam komunitas React saat ini. Kami akan menggunakan beberapa fitur modern yang paling umum saat ini dan dari sana Anda dapat menyesuaikannya sesuka Anda.

Boilerplate yang dibuat oleh artikel ini akan tersedia di sini!

Mulai

Pertama-tama, kita akan membuat folder untuk memulai boilerplate kita. Anda dapat menamainya apa pun yang Anda inginkan, saya akan memberi nama saya react-bolt .

Buka terminal Anda, dan buat seperti ini:

mkdir react-bolt

Sekarang, masuk ke folder yang Anda buat, dan ketik perintah berikut:

npm init -y

NPM akan membuat package.jsonfile untuk Anda, dan semua dependensi yang Anda instal dan perintah Anda akan ada di sana.

Sekarang, kita akan membuat struktur folder dasar untuk boilerplate kita. Ini akan menjadi seperti ini untuk saat ini:

react-bolt |--config |--src |--tests

Webpack

Webpack adalah bundler modul paling terkenal untuk aplikasi JavaScript saat ini. Pada dasarnya, ini menggabungkan semua kode Anda dan menghasilkan satu atau lebih bundel. Anda dapat mempelajarinya lebih lanjut di sini.

Di boilerplate ini kita akan menggunakannya, jadi instal semua dependensi ini:

npm install --save-dev webpack webpack-cli webpack-dev-server webpack-merge html-webpack-plugin clean-webpack-plugin img-loader url-loader file-loader 

Sekarang di configfolder kami , kami akan membuat folder lain bernama webpack, lalu di dalam webpackfolder itu buat 5 file.

Buat file bernama paths.js. Di dalam file itu akan menjadi direktori target untuk semua file output Anda.

Di dalamnya, masukkan semua kode ini:

Sekarang, buat file lain bernama rules.js, dan letakkan kode berikut di sana:

Setelah itu, kami akan membuat 3 file lagi:

webpack.common.babel.js

webpack.dev.babel.js

webpack.prod.babel.js

Pada dasarnya, dalam webpack.common.babel.jsfile kami , kami telah menyiapkan konfigurasi entri dan output kami dan juga menyertakan plugin apa pun yang diperlukan. Dalam webpack.dev.babel.jsfile tersebut, kami telah mengatur mode ke pengembangan. Dan di webpack.prod.babel.jsfile kami , kami telah menyetel mode ke produksi.

Setelah itu, di folder root kami, kami akan membuat file webpack terakhir yang dipanggil webpack.config.jsdan dimasukkan ke dalam kode berikut:

Konfigurasi webpack kita sudah siap, jadi sekarang kita akan mengerjakan bagian lain dari boilerplate dengan Babel, ESLint, Prettier, dll.

Babel

Saya rasa hampir semua orang yang bekerja dengan React mungkin pernah mendengar tentang Babel dan bagaimana transpiler sederhana ini membantu kehidupan kita. Jika Anda tidak tahu apa itu, Babel pada dasarnya adalah transpiler yang mengubah kode JavaScript Anda menjadi JavaScript ES5 lama biasa yang dapat berjalan di browser apa pun.

Kami akan menggunakan banyak plugin Babel, jadi di folder root kami, instal:

npm install --save-dev @babel/core @babe/cli @babel/node @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-async-to-generator @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/register @babel/runtime babel-eslint babel-jest babel-loader [email protected]

Setelah ini, kami akan membuat file di folder root kami yang disebut .babelrcdan di dalam file itu, kami akan meletakkan kode berikut:

Sekarang proyek kami dikompilasi oleh Babel, dan kami dapat menggunakan sintaks JavaScript generasi berikutnya tanpa masalah.

ESLint

Alat yang paling banyak digunakan untuk proyek linting saat ini adalah ESLint. Sangat membantu untuk menemukan kelas bug tertentu, seperti yang terkait dengan ruang lingkup variabel, penugasan ke variabel yang tidak dideklarasikan, dan sebagainya.

Pertama, instal dependensi berikut:

npm install --save-dev eslint eslint-config-airbnb eslint-config-prettier eslint-loader eslint-plugin-babel eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react 

Kemudian, di folder root kami, buat file bernama .eslintrc dan letakkan kode berikut di sana:

Lebih cantik

Prettier pada dasarnya adalah pemformat kode. Ini mem-parsing kode Anda dan mencetak ulang dengan aturannya sendiri yang memperhitungkan panjang baris maksimum, membungkus kode bila perlu.

Anda hanya perlu menginstalnya:

npm install --save-dev prettier

Dan di folder root kami, buat file bernama .prettierrc dan letakkan kode berikut di sana:

Reaksi

React adalah pustaka aplikasi JavaScript open-source untuk membangun antarmuka pengguna. Ini dikembangkan oleh Facebook dan memiliki komunitas besar di belakangnya. Jika Anda membaca artikel ini, saya berasumsi bahwa Anda sudah mengetahui tentang React, tetapi jika Anda ingin mempelajari lebih lanjut tentangnya, Anda dapat membaca di sini.

Kami akan menginstal dependensi berikut:

npm install --save react react-dom cross-env

Dan di dalam srcfolder kita, kita akan membuat file HTML sederhana index.htmldan memasukkan kode berikut:

After that, we’re going to create a simple React project. Inside our src folder, create a index.js file like this:

Inside our src folder we’re going to have the following structure:

src |--actions |--components |--reducers |--reducers |--store

Create a file called App.js inside the components folder, and put in the following code:

Redux

Redux makes it easy to manage the state of your application. Another way of looking at this is that it helps you manage the data you display and how you respond to user actions. These days a lot of people prefer other options like MobX or just the setState itself, but I’m gonna stick with Redux for this boilerplate.

First, we’re going to install some dependencies:

npm install --save redux react-redux redux-thunk

Then, we’re going to create our Redux store, and put some state there. In our store folder, create an index.js file and put that following code there:

Now, inside our reducers folder create an index.js and put the following code:

Last, we’re gonna to our index.js in our src folder, and wrap the code with the /> and pass our store as props to make it available to our application.

It’s going to be like this:

All done. Our Redux store is configured and ready to go.

React Router

React Router is the standard routing library for React. Basically, itkeeps your UI in sync with the URL. We’re gonna use it in our boilerplate, so install it:

npm install --save react-router-dom

After that, go to our index.js in our src folder and wrap all the code there with the

r>.

Our index.js in our src folder it’s going to end up like this:

Styled Components

Styled Components makes CSS easy for everyone, as it helps you organize your React project. Its objective is to write more small and reusable components. We’re gonna use it, and if you want to learn more about it, read up here.

First, install it:

npm install --save styled-components

Then, in our App.js file inside our components folder, we’re going to create a simple title using Styled Components. Our title is going to be like this:

And inside our file, we need to import styled components, so our file is going to end up like this:

Jest & React Testing Library

Jest is an open-source JavaScript testing library from Facebook. It makes it easy to test your application, and gives us a lot of information about what is giving the right output and what’s not. React Testing Library is a very light-weight solution for testing React components. Basically, this library is a replacement for Enzyme.

Every application needs some kind of tests. I’m not gonna write tests in this article but I’m gonna show you how you can configure these tools to start testing your applications.

First, we’re gonna install both:

npm install --save-dev jest jest-dom react-testing-library

After that, go to our package.json and put the following after all:

Then, go to our config folder, and inside it created another folder called tests and inside that folder, create 2 files.

First, create a file called jest.config.js and put in the following code:

Then, create a file called rtl.setup.js and put in the following code:

All done. Our boilerplate is ready to go and you can use it now.

Now go to our file package.json and put in the following code:

Now, if you run the command npm start and go to localhost:8080, we should see our application working fine!

If you want to see my final code, the boilerplate created by this article is available here!

I have some ideas for some features that I’d love to include in the boilerplate, so please feel free to contribute!

? Follow me on Twitter!

Follow me on GitHub!

I’m looking for a remote opportunity, so if have any I’d love to hear about it, so please contact me!

Original text