Самая простая установка приложения React

Я видел, как так много новичков в 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