Rumah alat pembangunan webstorm webstorm可以构建react项目吗?

webstorm可以构建react项目吗?

Jan 20, 2021 am 09:38 AM
webstorm

webstorm可以构建react项目,其构建方法是:首先安装webstorm并配置;然后在webstorm下配置node环境;接着在终端下安装执行“npm install -g create-react-app”;最后新建react即可。

webstorm可以构建react项目吗?

本教程操作环境:windows7系统、webstorm2020.3&&react16.4.0版本,Dell G3电脑。

推荐:《webstorm教程

用webstorm创建React项目

下载安装webstorm,然后配置一下,配置成功:

06ca2fbf7fa622b7bd347dbbf38b0e9.png

配置成功后就可以开启webstorm项目了。

1:在webstorm下配置node环境:

1f69e2cf06454f2e3f863045f9d9ba2.png

2:完成之后:

React官方脚手架地址:

https://github.com/facebook/create-react-app

在终端下安装执行npm install -g create-react-app 不用每个项目都装。一个webstorm装一次即可

59a7f5a31db322ee661075a18d92bf1.png

3:可以直接新建react app项目了。

49f4cf8ac1ee2fb92433e2b7d566eac.png

8feadb03964af74cfb21717b450d462.png

4:如上图:自己安装完成之后:执行下 npm list -depath0 (查看所下载的不为空的依赖包)

或者 npm ls (查看所下载的所有的依赖包包括空文件)

72195aa7ad560f5b18e2215d3845bbf.png

完成并开启入口

743116c75ee2e7eddbabdab65f8dfb4.png

5:最后可以自己完成自己react项目

9ca9f8184ff7e719fe6d47e146e997f.png

注意的是:一定要有顶层包裹的元素:如果不是报错

如下图:

27ccffa2ff820fb75caabb8659afb97.png

6:初始化:

新建一个component文件夹下。并建一个header.js 如下图:按钮控制内容的显隐性

缩写的class后面的类 Header 一定的要大写、 如果需要导出到其它地方引用必须 export default这个类

ea198d7e8ec950dfc0c78ae87309e74.png

7:引用导出的组件

420af4d4c5f24ff4c326c7f52ec55ee.png

8:最终结果

286d972133cb5c772c5b4cc0b858dcd.png

9:项目完成之后打包上线。运行yarn build 上传的文件如下图所示

1de8a14291187c3e164122906a32a52.png

Atas ialah kandungan terperinci webstorm可以构建react项目吗?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menyelesaikan ranap ribut web Bagaimana untuk menyelesaikan ranap ribut web Apr 08, 2024 pm 02:24 PM

Langkah-langkah untuk menyelesaikan masalah ranap WebStorm: Periksa kemas kini komputer anda;

Bagaimana untuk menjalankan projek jsp dalam webstorm Bagaimana untuk menjalankan projek jsp dalam webstorm Apr 08, 2024 pm 03:39 PM

Anda boleh menjalankan projek JSP dalam WebStorm dengan mengikuti langkah berikut: Buat projek Web Java. Konfigurasikan projek dan tambahkan aspek Web dan Java EE. Cipta fail JSP dalam direktori "src/main/webapp". Tulis kod JSP termasuk HTML, Java dan tag JSP. Sebarkan dan jalankan projek. Akses halaman JSP dengan memasukkan akar konteks aplikasi dalam penyemak imbas anda.

Bagaimana untuk menyambung ke pangkalan data dalam webstorm Bagaimana untuk menyambung ke pangkalan data dalam webstorm Apr 08, 2024 pm 03:42 PM

Anda boleh menggunakan WebStorm untuk menyambung ke pangkalan data melalui langkah-langkah berikut: 1. Buka tetingkap alat pangkalan data 3. Sambungkan ke sumber data 5. Semak imbas jadual dan data; 6. Edit objek pangkalan data; 7. Uruskan Pengguna dan kebenaran.

Bagaimana untuk memulakan semula webstorm Bagaimana untuk memulakan semula webstorm Apr 08, 2024 pm 07:15 PM

Untuk memulakan semula WebStorm, ikuti langkah berikut: Gunakan kekunci pintasan: Windows/Linux: Ctrl + Shift + A, macOS: Cmd + Shift + A. Masukkan "mulakan semula" dalam medan carian dan pilih "Mulakan semula". Menggunakan menu: Klik menu Fail dan pilih Mulakan semula di bawah Muat Semula. Menggunakan Pengurus Tugas: Dalam tetingkap aplikasi Pengurus Tugas atau Force Quit, pilih proses WebStorm dan klik Mulakan Semula atau Mulakan Semula.

Bagaimana untuk membalut baris secara automatik dalam ribut web Bagaimana untuk membalut baris secara automatik dalam ribut web Apr 08, 2024 pm 03:48 PM

WebStorm menyediakan pembalut baris automatik, yang memecahkan kod kepada baris berasingan untuk meningkatkan kebolehbacaan. Peraturannya termasuk: 1. Ungkapan dan penyataan panjang cawangan 2. Panggilan kaedah cawangan 3. Fungsi cawangan dan definisi kelas. Tetapan boleh disesuaikan pengguna seperti panjang baris maksimum, jenis lekukan dan kekunci pintasan. Walau bagaimanapun, pembungkusan perkataan mungkin tidak berfungsi dengan ulasan satu baris atau literal rentetan dan akan menjejaskan pemformatan kod, jadi semakan berhati-hati disyorkan sebelum permohonan.

Di manakah pembalut talian automatik webstorm? Di manakah pembalut talian automatik webstorm? Apr 08, 2024 pm 08:09 PM

Balutan garisan automatik boleh ditetapkan dalam WebStorm dengan mengikuti langkah berikut: Tandai kotak semak "Balut garisan" dan tetapkan lebar garisan maksimum. Pilih peraturan pembalut baris automatik: Tiada, pembalut baris di mana-mana kedudukan atau pembalut baris selepas kata kunci. Tetapan pilihan: kekalkan pembalut talian manual dan pembalut talian automatik selepas pengangkutan kembali. Gunakan tetapan dan tutup tetingkap tetapan. Nota: Tetapan ini digunakan untuk semua jenis fail dan boleh ditetapkan secara individu untuk jenis fail tertentu.

Mana satu lebih mudah digunakan, webstorm atau vscode? Mana satu lebih mudah digunakan, webstorm atau vscode? Apr 08, 2024 pm 07:33 PM

Bagi pembangun yang menumpukan pada pembangunan web dan mengejar fungsi yang mendalam, WebStorm ialah pilihan yang lebih baik manakala pengguna yang menghargai kebolehsesuaian, ringan dan sokongan berbilang bahasa lebih sesuai untuk VSCode.

Bagaimana untuk log masuk ke webstorm Bagaimana untuk log masuk ke webstorm Apr 08, 2024 pm 04:45 PM

Langkah-langkah untuk log masuk ke WebStorm: 1. Buka WebStorm 2. Pilih akaun GitHub atau JetBrains untuk log masuk 3. Masukkan bukti kelayakan;

See all articles