Я видел, как так много новичков в React разочаровывались, когда впервые пытались создать простое приложение для реагирования. Их разочарование не является надуманным, это просто потому, что они не знают, для чего используется каждая зависимость, а также что необходимо для их запуска и работы.
Золотое правило знания того, что вы делаете, - это понимать, зачем вы это делаете. Не используйте модуль, пока не поймете проблему, которую он решает. Этот пост поможет вам понять базовую настройку приложения React. Важно отметить, что React отличается от Redux, Flux, Router и т. Д. Ниже приводится краткое описание того, что необходимо сделать, чтобы настроить простейшее приложение React. Я предполагаю, что у вас уже есть настройка npm.
Создайте новую папку проекта
Запустите новый проект реакции, запустив приведенный ниже код.
mkdir new-react-app && cd new-react-app
Инициализировать новый проект узла
Следуйте подсказке и заполните соответственно. Здесь будут жить все необходимые пакеты узлов.
Беги
npm init
Теперь у вас должен быть файл package.json в папке вашего проекта.
Установите React и React-dom
React и React-DOM - это основные модули, необходимые для запуска проекта React.
Беги
npm install --save react react-dom
Установите Babel, чтобы использовать синтаксис ES2015 и JSX
Согласно React docs, рекомендуется использовать React с Babel, чтобы вы могли использовать ES6 и JSX в своем коде JavaScript. ES6 - это набор современных функций JavaScript, которые упрощают разработку, а JSX - это расширение языка JavaScript, которое прекрасно работает с React. Вероятно, именно здесь большинство людей начинают сталкиваться с проблемами.
Babel поможет вам преобразовать код Javascript с новым синтаксисом, таким как ES2015 (ES6), в ES5, чтобы большинство браузеров могли интерпретировать ваш код, поскольку многие из них еще не поддерживают ES6. Ниже приведен пример того, что Babel позволяет вам делать в вашем коде.
import React from 'react' const HelloWorld = () => { return ( <div className='hello-world'> <h1>Hello World</h1> <p>Welcome to my world</p> </div> ) } export default HelloWorld
JSX позволяет писать компоненты HTML и компоненты React в тегах, подобных HTML, в вашем Javascript. например <HelloWorld />
Чтобы установить Babel, выполните команду ниже
npm install --save-dev babel-cli babel-preset-react babel-preset-es2015
babel-loader
Создайте файл конфигурации Babel, запустив
echo '{ "presets": ["react", "es2015"] }' > .babelrc
Установите webpack и webpack-dev-server
Беги
npm install --save-dev
webpack webpack-dev-server
Настроить webpack для запуска с использованием webpack-dev-server локально
Первый шаг - создать файл webpack.config.js, запустив
touch webpack.config.js
Затем скопируйте и вставьте приведенный ниже код в файл
var webpack = require('webpack') var path = require('path') module.exports = { entry: path.resolve(__dirname, 'app'), output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: path.resolve(__dirname, 'public') }, module: { loaders: [ {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']}, {test: /(\.css)$/, loaders: ['style-loader', 'css-loader']} ] } }
Исходя из нашей конфигурации, нам нужно включить модули path, css-loader и style-loader, поскольку они используются.
Итак, давайте установим их, запустив
npm install --save-dev path style-loader css-loader
Кроме того, нам нужно создать общедоступные каталоги и каталоги компонентов, а также файл index.html, который будет содержать скелетную структуру html.
Беги
mkdir components public && touch public/index.html app.js
затем создайте простой компонент HelloWorld в папке компонентов, выполнив команду ниже
touch components/HelloWorld.js
скопируйте и вставьте приведенный ниже код в файл HelloWorld.js
import React from 'react' const HelloWorld = () => { return ( <div className='hello-world'> <h1>Hello World</h1> <p>Welcome to my world</p> </div> ) } export default HelloWorld
затем добавьте это в свой index.html
<!DOCTYPE html> <html> <head> <title>Simplest React App Setup</title> </head> <body> <div id='app'></div> <script src='/bundle.js'></script> </body> </html>
Затем вставьте приведенный ниже код в свой app.js (он должен находиться в вашем корневом каталоге)
import React from 'react' import ReactDOM from 'react-dom' import HelloWorld from './components/HelloWorld' ReactDOM.render(<HelloWorld />, document.getElementById('app'))
Добавьте этот "start": "webpack-dev-server"
в раздел сценария файла package.json. Это должно выглядеть так:
{ "name": "new-react-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "react": "^15.4.2", "react-dom": "^15.4.2" }, "devDependencies": { "babel-cli": "^6.22.2", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.22.0", "babel-preset-react": "^6.22.0", "css-loader": "^0.26.1", "path": "^0.12.7", "style-loader": "^0.13.1", "webpack": "^2.2.1", "webpack-dev-server": "^1.16.3" } }
Запустите приложение
Беги
npm start
Посетите браузер, чтобы увидеть ваше приложение
К настоящему времени ваше приложение должно быть запущено по адресу http: // localhost: 808 0 /. Если все прошло хорошо, ваш браузер должен показать вам то, что у меня ниже
Если вы застряли, попробуйте пройти через руководство еще раз, чтобы убедиться, что вы не пропустили ни одного шага, и убедитесь, что порт 8080 не используется.
Если вам это понравилось, нажмите 💚 ниже, чтобы другие люди увидели это здесь, на Medium. Кроме того, если у вас есть какие-либо вопросы или наблюдения, поделитесь своими мыслями / вопросами в разделе комментариев.
#2